Introduktion til HTML5-tags

Vi kender alle standardforkortelsen til HTML; hvilket er HyperText Markup Language. Så HTML5 er den nyeste og den nye version af HTML. Når et produkt er udviklet, ville der naturligvis være mange versioner af HTML med mange nye udviklinger undervejs. Så HTML5 har nye egenskaber og opførsel. Dette HTML5-tag er ikke længere et programmeringssprog, men det er et markeringssprog. Hvad er nu et markeringssprog? Definition af elementattributter ved hjælp af tags i et dokument er et markeringssprog. Så lad os nu gå i detaljer om, hvordan vi kan definere tags og oprette en webside.

Mærker af HTML5

Et tag er en specifikation for visning af indhold. Generelt ville der være et start- og sluttag. Og der er også få tags, der ikke kræver et slutmærke; synes godt om
hvilket betyder brud på linjen, som viser dataene ud for det tag fra den næste linje. Lad os se nogle af de nye elementer i HTML5.

I HTML5 kan vi generelt opdele tags i to kategorier.

  • Semantiske elementer: Få eksempler på disse elementer er;, , etc.
  • Ikke-semantiske elementer: Eksempler her er;, etc.

Mærkerne, der diskuteres nedenfor, er dem, der udelukkende er introduceret i HTML5-versioner. Det er forskellige typer tags, som alle kan kategoriseres.

1. Strukturelle mærker

Nedenfor er de typer af strukturelle mærker med eksempler:

en. Artikel: Dette er et mærke, der oftest bruges, der ligner et hovedmærke. Meget brugt i former, blogs, nyhedshistorie og alt sammen som eksempler.

Kode:

Den første


Velkommen tilbage

Produktion:

b. Bortset fra: Noget, der ligner vores normale tags, som vil relatere indholdet til det omkringliggende indhold, som en sidefelt i artiklen. Og dette tag ville kun give mening, når du bruger en IE-version over 8.

c. Detaljer: Dette tag bruges til at give nogle yderligere data til brugeren. Dette kan være en interaktiv platform, der kan skjule eller vise detaljerne. Vi kan se brugen af ​​denne fane under et resume-tag.

d. Header: Dette tag er relateret til overskriftsdelen og indeholder titeloplysninger. Det skal have både start- og slutkoder.

Kode:

Glade timer


Morgen | Eftermiddag | Aften

produktion:

e. hgroup: Dette tag bruges til at beskrive en gruppe overskrifter. Lad os se i eksemplet.

Kode:

Lad os tjekke størrelsen på denne h1


Lad os tjekke størrelsen på denne h2


Lad os tjekke størrelsen på denne h3


Lad os tjekke størrelsen på denne h4


Lad os tjekke størrelsen på denne h5

Produktion:

f. Sidefod: Dette tag er det, der skal placeres i slutningen af ​​siden. Det handler om noget som copyright, historikrelateret information eller data. Lad os se et lille eksempel nedenfor.

Kode:

Kopierettigheder | Komme tilbage snart

Abonnér venligst for mere læringsindhold

Produktion:

g. nav: Dette tag er beregnet til at give et afsnit af alle links til navigation.

Kode:

  • EDUCBA Hjem
  • Om EDUCBA
  • Kurser i EDUCBA

Produktion:

Kontroller ved at klikke på linkene, når du skriver din kode, mens du træner.

h. Afsnit: Som navnet allerede angiver, definerer dette tag den del af koden som kroppen, header, sidefod osv. Her er både start- og slutkoder nødvendige. Lad os se et lille eksempel nedenfor:

Kode:

Velkommen


Vi ses snart


Tak skal du have.

Produktion:

jeg. Resume: Dette tag bruges parallelt med fanebladet Detaljer. Under detaljetag har vi dette resume til at sammenfatte koncepterne. Eksempel nedenfor:

Kode:



How is this Summary tag defined?

Ved at klikke på pilen ved siden af ​​oversigtsspørgsmålet, jeg fik vist

Dataene efter displayetiketten vises på denne måde.

Produktion:

Nu udvides resume-tagdataene, vi får nedenstående.

2. Form tags

Her er de forskellige typer formmærke forklaret nedenfor med eksempler:

en. Datalist: Dette tag bruges som en drop-down, der har foruddefinerede værdier, som en bruger kan vælge. Lad os se på det lille eksempel nedenfor:

Kode:

Indtast dit foretrukne browsernavn:

Produktion:

Rullegardinmenuen vises, når musen er svævet over.

b. Keygen: Dette er til kryptering. Det er til at generere en krypteret nøgle til at videregive dataene i et krypteret format. For dette element er kun startmærket nok / påkrævet, og slutmærket er ikke obligatorisk.

c. Måler: Dette tag giver os måling af de data, der er til stede i et givet interval.

Kode:


25 out of 100

Dette er 25 ud af 100

70%

Dette er intervallet for 70%

Produktion:

3. Formatering af tags

Nedenfor er typerne af formateringskode med eksempler:

en. BDI: Dette er tovejsisolering. Som navnet allerede antyder, kan dette tag bruges til at isolere en del af teksten og give den forskellige stilarter med den i anden tekst.

b. Mark: Dette tag kan hjælpe os med at fremhæve en bestemt tekst.

Kode:

Dette er, hvordan du kan markere eller fremhæve en tekst.

Produktion:

c. Output: Som navnet allerede viser os, giver det resultatet af enhver beregning.

Kode:



+
=

Produktion:

Sørg for, at du bemærker formattributten til oninput. Når du har indtastet attributten 'x', vises output.

d. Fremskridt: Dette tag giver os status for en bestemt opgave.

Kode:

Denne statuslinje er 80% afsluttet

Produktion:

e. Rp: Dette bruges, når rubin-tags ikke understøttes.

f. Rt: Det bruges sammen med mærket rubin. Oftest bruges dette til udtale på både japansk og kinesisk.

g. Ruby: Dette tag bruges med rt- og rp-tags, hvor kommentarerne med hensyn til de to sprog kinesisk og japansk udtales.

h. Wbr: Dette tag er til ordbrud . Det bruges hovedsageligt til at kontrollere, hvordan et ord går i stykker, når størrelsen på vinduet ændres.

4. Embedded Content tags

Her er de typer indlejret indholdsmærke, der er forklaret nedenfor med eksempler:

en. Audio: Som navnet allerede antyder, vil dette tag hjælpe os med at indarbejde lydfiler i HTML-dokumentet.

b. Lærred: Definerer et sted på den webside, hvor grafik eller figurer eller grafer er til stede eller kan defineres. Her er et eksempel.

Kode:



window.onload = function()(
var can = document.getElementById("run");
var context = can.getContext("2d");
context.moveTo(30, 60);
context.lineTo(150, 30);
context.stroke();
);

Produktion:

c. Dialog: Dette tag giver os en standardboks, især hvis vi ville have data i en boks.

Kode:

Prøv dialog her Hvordan kommer dialogboksen op?

Produktion:

d. Embed: Dette tag kan bruges til at komme i en ekstern fil til HTML-filen. Vi kan kun have startkoden, og slutkoden er ikke obligatorisk her. Der er forskellige attributter, der kan bruges med dette tag, nemlig; bredde, højde, src og type.

e. Figur og billedtekst: Dette som allerede i dets navn kan inkorporere billederne og kan give en billedtekst til dette billede.

f. Kilde: Dette tag kan implementere flere lyd- og videofiler ved at angive placeringen af ​​filerne ved hjælp af dette kildetag.

g. Tid: Dette tag, som navnet allerede har besked om, er et tag til visning af tidspunktet. Og bemærk, at dette tag ikke er funktionelt i tilfælde af internet explorer version 8 og nedenfor.

h. Video: Med navnet på tagget kan vi selvfølgelig vide, hvor dette tag bruges. For at specificere videofilerne har vi dette tag. Inde i denne Audio / Video-tags definerer vi kildetagsmærkerne i specificeringen af ​​filerne og deres placering.

Inputelementer af HTML5-tags

Her er nogle inputelementer, som vi bruger i HTML5-tags:

1. E-mail: Dette er et af inputelementerne i HTML5. Dette element tager kun e-mail-adresser ind som input.

2. Nummer: Dette inputelement accepterer kun nummeret.

3. Område: Som navnet allerede forklarer, indeholder dette tag et interval af numre.

4. URL: Dette input-tag accepterer inputfeltet til URL-adressen. I denne inputtype kan vi kun indtaste URL'en.

5. Pladsholder: Dette er en af ​​attributterne for inputtypen som tekst eller tekstområde eller ethvert nummer. Denne pladsholderværdi viser den værdi, der skal gives som input.

Kode:


Enter Date of birth : placeholder = "dd/mm/yyyy"/>

Produktion:

6. Autofokus: Denne attribut fokuserer automatisk på et bestemt felt, hvor dette element er blevet erklæret inde i inputmærket. Denne attribut understøttes kun af de nyeste versioner af Chrome, Safari og Mozilla. Syntaks er som:


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner


Tag : This tag represents a description of a definition.
Tag : This tag deletes a specified text.
Tag : This tag helps to display data in a scrolling manner.

This texxt is in a scrolling manner

Produktion:

7.: Dette er en af ​​de grundlæggende tags, der vil hjælpe browseren til at forstå den version af HTML, som programmet skrives i. Erklæringen af ​​dette tag skal skrives inden HTML-tagget.

8.: Dette metakode beskriver beskrivelsen af ​​HTML-dokumentet. Det indeholder forfatterens navn, dato og ændringer osv.

I denne HTML5 har vi endda en mulighed for at få GeoLocation af en enhed. Der er forskellige metoder, der kan være nyttige til at gøre denne placeringstagning nem. Der er også forskellige skrifttyper og farver tilgængelige i HTML5. Nedenfor er de få tags, der fjernes fra HTML-brugen fra denne HTML5-version.

Akronym, Applet, big, dir, font, frameset, center, tt (TeleType-tekst), basefont, center, strike, frame, u (understreget tekst), isindex, noframes osv. Få attributter, der fjernes, er nedenfor:

Juster, bgcolor, cellpadding, celleafstand, kant, link, form, charset, arkiv, codebase, rækkevidde, alink, vlink, link, baggrund, kant, clear, rulle, størrelse, bredde osv.

9.: Dette tag bruges til at vise indholdet, hvor brug af JavaScript er deaktiveret. Ethvert indhold, der er skrevet inde i dette tag, kan bruges i stedet for indholdet, uanset hvor javascript bruges. Som en øvelse kan du prøve at udføre de forskellige tags, som eksempler ikke findes.

Konklusion

Så ja, der er de grundlæggende tags og referencer til HTML5. Den oprindelige version af HTML5 blev frigivet den 28. oktober 2014. Vi har set forskellige nye tags, der blev introduceret og havde gennemgået et par attributter i HTML5. I sidste ende havde vi endda dækket over, at ikke kun introduktionen af ​​nye elementer blev udført, men nogle elementer og attributter, der var til stede, var begrænset til brug gennem denne nye version af HTML5.

Der var mange attributter, der blev givet med eksempler, og nogle med kun dataene og formålet med attributten eller elementerne. Prøv at øve på alle disse forskellige elementer og egenskaber og fortsæt med at lære.

Anbefalede artikler

Dette er en guide til HTML5-tags. Her diskuterer vi de øverste 4 HTML5-tags og dens inputelementer i detaljer sammen med eksempler og kodeimplementering. Du kan også se på de følgende artikler for at lære mere-

  1. HTML-begivenheder
  2. HTML-layout
  3. HTML-rammer
  4. HTML-tabel tags
  5. JavaScript-begivenheder | Forskellige implementeringer af JavaScript-begivenheder
  6. Forskellige typer metatag i HTML
  7. Hvordan fungerer formatering af tekst i HTML?
  8. Forskellige semantiske elementer i HTML5

Kategori:

Webudviklingsværktøjer