Introduksjon til HTML5 semantiske elementer

Følgende artikkel gir deg forskjellige semantiske elementer i html5. La oss begynne med forståelse av semantikk. Semantikk handler om forskjellige typer tagger som funksjonalitet vil skildre og utføre samme funksjon som per taggenavnet. Funksjonen til taggen vil lett forstås ved navn; som er i et brukerforståelig navn / format. De fleste elementene i HTML er vanligvis semantiske elementer.

Fordeler med semantiske elementer i HTML5

fordelene med semantiske elementer er som følger:

  • Enkel kodeforståelse.
  • Vedlikehold kan utføres raskt og passende.
  • Det er ikke nødvendig å legge til noen beskrivelse spesielt for noen tag.

Ulike semantiske elementer i HTML5

La oss nå komme inn på de semantiske elementene i HTML5.

1.

Denne taggen gir oss en ide om at dataene i denne taggen spesifikt er for lignende innhold. Det kommer an på de forskjellige typer artikler vi generelt også har. Det kan være en blogg, fora, spalteartikler i aviser, etc.

Kode:



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA



HTML5
New Updated version of HTML

Learning HTML
We are learning through EDUCBA

Produksjon:

2.

Denne taggen handler om å gi et seksuelt innhold av de totale dataene. Når du vet om bruk av både artikkel- og seksjonskoder, kan disse kodene brukes i hver kode. Det er seksjonsmerke kan brukes i artikkelen og omvendt.

Kode:


The section here is about:

Læring og øving

Produksjon:

3.

Denne taggen gir alle overskriftsdataene. Alle data som vi ønsker å plassere i overskriftsformatet, brukes under denne overskriften. Og denne taggen kan brukes flere ganger i hele HTML-skriptingen. La oss se et lite eksempel på det.

Kode:



This is header #1



This is header #1



This is header #1

Den første

neste …

Dette er topp nummer 2


Den andre

Produksjon:

4.

Dette er bunntekstdelen i HTML-skriptet vårt. Vanligvis ser vi alle opphavsrettsdataene og den lille delen vi finner under alle tilbud som "betingelser gjelder" på alle tilbud. Så disse tingene er definert under bunnteksten.

Kode:

Innvendig kropp og over bunntekst

Innvendig bunntekst.


Nok en bunntekst


Betingelsene gjelder

Produksjon:

5.

Denne taggen gir oss navigasjonselementene. URLen i ethvert HTML-dokument scripting der vi vanligvis ønsker å navigere fra en side til en annen side gjennom denne taggen. Alle data som er gitt under denne taggen er tilgjengelige som hyperkoblinger. Disse hyperkoblingene kan være nyttige når du navigerer fra en seksjon til en annen seksjon. Et lite eksempel er definert som:

Kode:


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2


About
About link 1
About link 1
Contact
Contact Link 1
Contact Link 2

Produksjon:

Mens du øver, klikker du på disse koblingene og sjekker hvordan fargen på hyperkoblingen endres ved å klikke.

6.

Dette er en tag som brukes til å vise dataene på sidene av HTML-dokumentet. På mange nettsteder kan vi finne innhold som finnes i en sidefelt, som vises med denne side-taggen. Dette innholdet skal være i tråd med de andre dataene som finnes i dokumentet. La oss se et lite eksempel på det.

Kode:

Hvordan side taggen brukes

Innvendig tag


Innhold inne på siden

Produksjon:

Det nøyaktige innholdet kan ikke spesifiseres fullstendig på samme måte, det kan bare dokumenteres og forstås tydelig når du bruker hele HTML-siden.

7.

Denne taggen spesifiserer at vi skal legge ved et bilde. Denne taggen kan brukes til å spesifisere en bildekilde og vise en gif eller et bilde.

Kode:





Som nevnt over, er det slik vi kan definere figuren. Inne i figurmerket kan vi spesifisere bildekommandoen vår med en kildekode. Inne i denne figurkoden kan vi på sin side bruke figurtekstkoden.

8.

Denne taggen brukes til å gi bildetekst under bildet som følger med. Den kan brukes inne i figuren. Bruk av dette kan sees i eksemplet nedenfor.




This is description of the image attached.

Du kan prøve å utføre det samme ved å oppgi en bildekilde og sjekke hvordan utdataene vises.

9.

Denne taggen spesifiserer alle attributtene og hele innholdet på HTML-nettstedet. Den inneholder alt det unike innholdet. En viktig ting å merke seg for denne spesielle koden er at denne taggen bare kan brukes én gang i den totale siden oppretting. Vi finner ut at andre tagger kan brukes mer enn en gang for å lage en webside, men denne hovedkoden er en enkeltbruks tag.

Kode:



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying



Learning HTML Semantic Tags
Studying

Lesing ville bidra til å forstå forskjellige temaer



Øve


Med å studere er å øve en må ting å gjøre i læring

Produksjon:

10.

Denne taggen er for å fremheve spesifikt innhold eller data. Med andre ord, denne taggen er nyttig når det gjelder å merke data. La oss se et lite eksempel på dette nedenfor:

Kode:

I hele denne teksten som jeg skriver nå, vil jeg merke denne teksten

Produksjon:

11.

Denne taggen inneholder tilleggsdetaljer, som brukere kan skjule alle detaljer etter ønske. Gjennom denne taggen kan brukere åpne / lukke alt innhold de trenger. Hvis vi vil at merkelappen skal avsløre detaljene i selve starten, kan attributtet “åpen” brukes.

Nedenfor er et lite eksempel på det samme:

Kode:

Vises dette?

Produksjon:

Nå, hva ville være resultatet hvis vi ikke bruker det åpne attributtet?

Vises dette?

Utgang 1:

Utgang 2:

12.

Denne koden brukes i detaljkoden. Under detaljkoden kan vi ha en sammendragskode som spesifiserer hele sammendraget av websiden eller HTML-dokumentet. En viktig ting å merke seg her er at sammendragskoden er den første barnekoden som må komme inn under detaljkoden. La oss finne et lite eksempel nedenfor:

Kode:



Have written this inside summary tag which is inside details tag

Denne teksten kommer bare under detaljkode


Disse tekstdataene er skrevet etter at detaljkoden er fullført

Utgang 1:

I utskriften ovenfor hadde vi markert pilen, da vi får utdata 2 når vi utvider den.

Utgang 2:

Denne taggen gir kanskje ikke noen forskjell

1. 3.

Denne taggen definerer dato / tid i et slikt format som brukere enkelt kan forstå. Men en ting å merke seg er at denne taggen kanskje ikke gir oss en endret utgang i mange av nettleserne.

Kode:

For tiden er kl 23:00 om natten.

Produksjon:

14.

Som navnet allerede antyder, er denne taggen for å skrive alt innhold i en boks. Denne taggen skal ha et åpent attributt for visning av dialogboksen når kildekoden er utført. Finn et eksempel nedenfor:

Dataene som er skrevet her vises i en dialogboks

Produksjon:

15.

Denne taggen gir fremdriften for en viss oppgave i en grafisk fremstilling. Vi må her ha det maksimale antallet som fremdriften må være representert for. Denne taggen består hovedsakelig av to attributter. Maks og verdi er de to attributtene. Maks representerer det totale antallet som må fullføres, og Verdi gir oss telleprosentene som er ferdige med hensyn til maksimal telleverdi. Et eksempel på det er nedenfor:

Kode:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Produksjon:

16.

Denne taggen er beregnet for måling. Dette kan brukes til plassen som blir tatt av en spørring eller bruk av diskplass. Det er noen få attributter som skal brukes med denne taggen. Attributtene er maks, min og verdi. Basert på bruken deres kan vi definitivt finne ut deres formål og bruk.

Kode:


EDCUBA


EDCUBA


EDCUBA

Bruk av Meter tag

I en leilighet på 6 etasjer bor jeg i 2. etasje:
2 av 6

Produksjon:

17.

Dette er en kode som er introdusert for å legge til videofiler på HTML-siden vår. Inntil denne taggen ble introdusert, brukte utviklere plugins for å introdusere videofiler i HTL-sideinnhold. Det er noen få attributter som kan brukes sammen med taggen. Autospilling, forhåndsinnlasting, dempet er noen av disse.

Kode:


Vi trenger bare en kildemerke for å gi kilden der vi trenger å laste opp videoinnholdet til siden vår.

18.

Denne taggen er for å legge til lydfiler på vår HTML-side. Bruken og kildekoden ville være den samme som videokoden. Som en øvelse kan du prøve å bruke alle de semantiske elementene og lage e HTML 5 versjon websiden for å lære bedre og raskere.

Konklusjon

I denne artikkelen må vi se mange semantiske elementer og bruken av dem i HTML5. En viktig ting å merke seg her er at mange av disse kodene støttes av Internet Explorer-versjoner større enn 9 og kromversjoner større enn 3. Så fortsett å lære og øve for å få en bedre forståelse av bruken av tagger i HTML 5.

Anbefalte artikler

Dette er en guide til HTML5 semantiske elementer. Her diskuterer vi introduksjonen og ulike semantiske elementer i HTML5 sammen med kodeimplementeringen. Du kan også se på følgende artikkel for å lære mer -

  1. Topp 10 nye HTML5-elementer
  2. HTML5-tagger
  3. HTML5 nettarbeidere
  4. Forskjellig type HTML-hendelser

Kategori:

Programvare utvikling