Introduksjon til HTML5-tagger

Vi kjenner alle standardforkortelsen til HTML; som er HyperText Markup Language. Så HTML5 er den siste og den nye versjonen av HTML. Når et produkt er utviklet, ville det tydeligvis være mange versjoner av HTML med mange nye utviklinger underveis. Så HTML5 har nye attributter og atferd. Denne HTML5-koden er ikke et programmeringsspråk lenger, men det er et markeringsspråk. Hva er et merkspråk? Å definere elementattributter ved å bruke koder i et dokument er et merkspråk. Så la oss nå gå nærmere inn på hvordan vi kan definere koder og opprette en webside.

Merkelapper til HTML5

En tag er en spesifikasjon for visning av innhold. Generelt vil det være en start- og sluttmerke. Og det er også få tagger som ikke krever sluttmerke; som
som betyr brudd på linjen, som viser dataene ved siden av taggen fra neste linje. La oss se noen av de nye elementene i HTML5.

I HTML5 kan vi generelt dele kodene i to kategorier.

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

Taggene diskutert nedenfor er de som nylig ble introdusert eksklusivt i HTML5-versjoner. De er forskjellige typer koder som alle kan kategoriseres.

1. Strukturelle tagger

Nedenfor er de typene strukturelle tagger med eksempler:

en. Artikkel: Dette er en tag som for det meste brukes ligner en hodetagg. Mye brukt i former, blogger, nyhetsartikler og alt som eksempler.

Kode:


Den første


Velkommen tilbake

Produksjon:

b. Bortsett: Noe som ligner på de vanlige kodene våre, som vil relatere innholdet til innholdet rundt, som en sidefelt i artikkelen. Og denne taggen vil bare være fornuftig når du bruker en IE-versjon over 8.

c. Detaljer: Denne taggen brukes til å gi noen tilleggsdata til brukeren. Dette kan være en interaktiv plattform som kan skjule eller vise detaljene. Vi kan se bruken av denne fanen under sammendragskoden.

d. Topptekst: Denne taggen er relatert til topptekstdelen og inneholder tittelinformasjon. Det må ha både start- og sluttagger.

Kode:


Gladtimer


Morgen | Ettermiddag | Kveld

produksjon:

e. hgroup: Denne taggen brukes til å beskrive en gruppe overskrifter. La oss se på eksemplet.

Kode:



La oss sjekke størrelsen på denne h1


La oss sjekke størrelsen på denne h2


La oss sjekke størrelsen på denne h3


La oss sjekke størrelsen på denne h4


La oss sjekke størrelsen på denne h5

Produksjon:

f. Bunntekst: Denne taggen er den som skal plasseres på slutten av siden. Den omhandler noe som copyright, historierelatert informasjon eller data. La oss se et lite eksempel nedenfor.

Kode:



Kopierettigheter | Kom tilbake snart

Abonner for mer læringsinnhold

Produksjon:

g. nav: Denne taggen er for å gi en del av alle koblinger for navigasjon.

Kode:



  • EDUCBA Hjem
  • Om EDUCBA
  • Kurs i EDUCBA

Produksjon:

Sjekk ved å klikke på lenkene når du skriver koden mens du trener.

h. Seksjon: Som navnet allerede angir, definerer denne taggen den delen av koden som kroppen, toppteksten, bunnteksten osv. Her er både start- og sluttkoder nødvendige. La oss se et lite eksempel nedenfor:

Kode:


Velkommen


Ser deg snart


Takk skal du ha.

Produksjon:

Jeg. Sammendrag: Denne taggen brukes parallelt med detaljfanen. Under detaljkoden har vi denne sammendragskoden for å oppsummere konseptene. Eksempel nedenfor:

Kode:



How is this Summary tag defined?

Ved å klikke på pilen ved siden av sammendragsspørsmålet jeg fikk vist

Dataene etter visningskoden vises slik.

Produksjon:

Nå utvider du sammendragsdataene, får vi nedenfor.

2. Skjemaetiketter

Her er de forskjellige typene skjemaetiketter som er forklart nedenfor med eksempler:

en. Datalist: Denne taggen brukes som en rullegardin som har forhåndsdefinerte verdier for en bruker å velge. La oss se på det lille eksemplet nedenfor:

Kode:


Skriv inn favorittnavnet ditt:

Produksjon:

Nedtrekksvinduet dukker opp når musen blir svevet over.

b. Keygen: Dette er for krypteringen. Det er for å generere en kryptert nøkkel for å overføre dataene i et kryptert format. For dette elementet er det bare startkoden som er nok / påkrevd, og sluttkoden er ikke obligatorisk.

c. Måler: Denne taggen vil gi oss måling av dataene som er til stede i et gitt område.

Kode:


25 out of 100

Dette er 25 av 100

70%

Dette er området for 70%

Produksjon:

3. Formatering av tagger

Nedenfor er typene for formateringskode med eksempler:

en. BDI: Dette er toveis isolasjon. Som navnet allerede antyder, kan denne taggen brukes til å isolere en del av teksten og gi den forskjellige stiler som den for annen tekst.

b. Merk: Denne taggen kan hjelpe oss med å fremheve en spesifikk tekst.

Kode:


Slik kan du merke eller markere en tekst.

Produksjon:

c. Utgang: Som navnet allerede viser oss, gir det resultatet av enhver beregning.

Kode:



+
=

Produksjon:

Forsikre deg om at du legger merke til skjemaattributtet til oninput. Når du har lagt inn attributtet 'x' -verdi, vises utdataene.

d. Fremdrift: Denne taggen gir oss fremdriften for en bestemt oppgave.

Kode:


Denne fremdriftslinjen er 80% fullført

Produksjon:

e. Rp: Dette brukes når rubin-kodene ikke støttes.

f. Rt: Den brukes med taggen rubin. Dette brukes vanligvis i uttale på både japansk og kinesisk.

g. Ruby: Denne taggen brukes med rt og rp taggene der merknadene med hensyn til de to språkene kinesisk og japansk uttales.

h. Wbr: Denne taggen er for ordbrudd . Det brukes hovedsakelig for å sjekke hvordan et ord går i stykker når størrelsen på vinduet endres.

4. Innebygde innholdsmerker

Her er typene for innebygd innholdskode forklart nedenfor med eksempler:

en. Audio: Som navnet allerede antyder, vil denne taggen hjelpe oss å innlemme lydfiler i HTML-dokumentet.

b. Lerret: Definerer et sted på websiden der grafikk 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();
);

Produksjon:

c. Dialog: Denne taggen gir oss en standardboks, spesielt hvis vi ønsket å ha data i en boks.

Kode:


Prøver du dialog her Hvordan kommer dialogboks opp?

Produksjon:

d. Embed: Denne taggen kan brukes til å få inn en ekstern fil til HTML-filen. Vi kan bare ha startkoden, og sluttkoden er ikke obligatorisk her. Det er forskjellige attributter som kan brukes med denne taggen, nemlig; bredde, høyde, src og type.

e. Figur og figurtekst: Dette som allerede i navnet kan inkorporere bildene og kan gi en bildetekst til det bildet.

f. Kilde: Denne taggen kan implementere flere lyd- og videofiler ved å angi plasseringen av filene ved bruk av denne kildekoden.

g. Tid: Denne taggen som navnet allerede varsler, er en kode for å vise klokkeslettet. Og merk at denne taggen ikke er funksjonell i tilfeller av internet explorer versjon 8 og nedenfor.

h. Video: Med navnet på taggen kan vi tydeligvis bli kjent med hvor denne koden brukes. For å spesifisere videofilene har vi denne taggen. Inne i denne Audio / Video-taggene definerer vi kildetagene i å spesifisere filene og deres plassering.

Inputelementer av HTML5-tagger

Her er noen elementer som vi bruker i HTML5-koder:

1. E-post: Dette er en av inngangselementene i HTML5. Dette elementet tar bare inn e-postadresser som input.

2. Nummer: Dette inngangselementet godtar bare tallet.

3. Område: Som navnet allerede forklarer, inneholder denne taggen et antall tall.

4. URL: Denne inndatakoden godtar inndatafeltet for URL-adressen. I denne inndatatypen kan vi bare oppgi URL-en.

5. Plassholder: Dette er en av attributtene for inndatatypen som tekst eller tekstområde eller hvilket som helst nummer. Denne innehaverens verdi viser verdien som skal gis som input.

Kode:


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

Produksjon:

6. Autofokus: Dette attributtet fokuserer automatisk på et bestemt felt der dette elementet er blitt erklært inne i input-taggen. Denne attributtet støttes bare av de nyeste versjonene av 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

Produksjon:

7.: Dette er en av de grunnleggende kodene som vil hjelpe nettleseren til å forstå versjonen av HTML-filen der programmet skrives. Erklæringen for denne taggen skal skrives før HTML-koden.

8.: Denne metakoden beskriver beskrivelsen av HTML-dokumentet. Den inneholder forfatterens navn, dato og endringer, etc.

I denne HTML5 har vi til og med en mulighet til å få GeoLocation av en enhet. Det er forskjellige metoder som kan være nyttige for å gjøre denne posisjonsmerking lett. Det er også forskjellige skrifter og farger som er tilgjengelige i HTML5. Nedenfor er de få taggene som er fjernet fra HTML-bruken fra denne HTML5-versjonen.

Akronym, Applet, big, dir, font, frameset, center, tt (TeleType-tekst), basefont, center, strike, frame, u (understreket tekst), isindex, noframes, etc. Få attributter som er fjernet er nedenfor:

Align, bgcolor, cellpadding, celleavstand, border, link, form, charset, archive, codebase, scope, alink, vlink, link, background, border, clear, scrolling, størrelse, bredde, etc.

9.: Denne taggen brukes til å vise innholdet der bruken av JavaScript er deaktivert. Alt innhold skrevet i denne taggen kan brukes i stedet for innholdet der javascript brukes. Som en øvelse kan du prøve å utføre de forskjellige kodene som eksempler ikke er gitt.

Konklusjon

Så ja, det er de grunnleggende kodene og referansene for HTML5. Den første versjonen av HTML5 ble utgitt 28. oktober 2014. Vi har sett forskjellige nye tagger som ble introdusert og hadde gått gjennom noen få attributter i HTML5. Til slutt hadde vi til og med dekket at ikke bare introduksjonen av nye elementer ble gjort, men noen elementer og attributter som var til stede, ble begrenset fra bruk gjennom denne nye utgivelsen av HTML5.

Det var mange attributter som ble gitt med eksempler, og noen med bare dataene og formålet med attributtet eller elementene. Prøv å øve på alle de forskjellige elementene og egenskapene og fortsett å lære.

Anbefalte artikler

Dette er en guide til HTML5-tagger. Her diskuterer vi de 4 beste HTML5-kodene og inngangselementene i detalj sammen med eksempler og implementering av kode. Du kan også se på følgende artikler for å lære mer-

  1. HTML-hendelser
  2. HTML-oppsett
  3. HTML-rammer
  4. HTML-tabellkoder
  5. JavaScript-hendelser | Ulike implementeringer av JavaScript-hendelser
  6. Ulike metatagger i HTML
  7. Hvordan formatering av tekst i HTML fungerer?
  8. Ulike semantiske elementer i HTML5