Introduktion til HTML5 semantiske elementer

Den følgende artikel giver dig forskellige semantiske elementer i html5. Lad os begynde med forståelse af semantik. Semantik handler om forskellige typer tags, hvilken funktionalitet ville afbilde og udføre den samme funktion som pr. Dens tagnavn. Taggens funktionalitet kan let forstås ved dens navn; som er i et brugerforståeligt navn / format. De fleste af elementerne i HTML er generelt semantiske elementer.

Fordele ved semantiske elementer i HTML5

fordelene ved semantiske elementer er som følger:

  • Nem kodeforståelse.
  • Vedligeholdelse kan udføres hurtigt og passende.
  • Det er ikke nødvendigt at tilføje nogen beskrivelse specifikt til et mærke.

Forskellige semantiske elementer i HTML5

Lad os nu komme ind på de semantiske elementer i HTML5.

1.

Dette tag giver os en idé om, at dataene inde i dette tag specifikt er til lignende indhold. Det afhænger af de forskellige typer artikler, vi generelt også har. Det kan være en blog, fora, kolonneartikler i aviser osv.

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

Produktion:

2.

Dette tag handler om at give et sektionsindhold af de samlede data. Når du kender til brug af både artikel- og sektionsmærker, kan disse mærker bruges i hvert tag. Det er sektionsmærke, der kan bruges i artiklen, og vice versa.

Kode:


The section here is about:

Læring og øvelse

Produktion:

3.

Dette tag giver alle overskriftsdata. Alle data, som vi vil placere i headerformatet, bruges under dette overskrifttag. Og dette tag kan bruges flere gange i hele HTML-scripting. Lad os se et lille eksempel på det.

Kode:



This is header #1



This is header #1



This is header #1

Første

næste …

Dette er overskrift # 2


Anden en

Produktion:

4.

Dette er sidefoden i vores HTML-script. Generelt ser vi alle copyright-data og det lille afsnit, vi finder under ethvert tilbud som ”betingelser gælder” på ethvert tilbud. Så disse ting er defineret under footer-tagget.

Kode:


Inde i krop og over sidefodtag

Indvendig sidefodsmærke.


Et andet sidefodsmærke

Betingelser gælder

Produktion:

5.

Dette tag giver os navigationselementerne. URL'en i ethvert HTML-dokument scripting, hvor vi generelt ønsker at navigere fra en side til en anden side gennem dette tag. Alle data, der gives under dette tag, er tilgængelige som hyperlinks. Disse hyperlinks kan være nyttige til at navigere fra et afsnit til et andet afsnit. Et lille eksempel defineres 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

Produktion:

Mens du øver, skal du klikke på disse links og kontrollere, hvordan farven på hyperlink ændres ved at klikke.

6.

Dette er et tag, der bruges til at vise dataene på siderne af vores HTML-dokument. På mange websteder kan vi finde indhold, der findes i en sidebjælke, der vises ved hjælp af dette side-tag. Dette indhold skal være på linje med de andre data, der findes i dokumentet. Lad os se et lille eksempel på det.

Kode:


Hvordan sidemærket bruges

Indvendigt tag


Indhold inde i taggen til side

Produktion:

Det nøjagtige indhold kan ikke specificeres fuldstændigt på samme måde, det kan kun dokumenteres og forstås klart, mens hele HTML-siden bruges.

7.

Dette tag specificerer, at vi skal vedhæfte et billede. Dette tag kan bruges til at specificere en billedkilde og vise en gif eller et billede.

Kode:





Som nævnt ovenfor er det sådan, vi kan definere figurtagget. Inde i figurtagget kan vi specificere vores billedkommando med et kildetag. Inde i dette figurmærke kan vi igen bruge figurtekstmærket.

8.

Dette tag bruges til at give overskrift under det leverede billede. Det kan bruges inden i figurmærket. Anvendelse heraf kan ses i nedenstående eksempel.




This is description of the image attached.

Du kan prøve at udføre det samme ved at give en billedkilde og kontrollere, hvordan output vises.

9.

Dette tag specificerer alle attributterne og det komplette indhold på HTML-webstedet. Det indeholder alt det unikke indhold. En vigtig ting at bemærke for dette særlige tag er, at dette tag kun kan bruges én gang i den samlede sideoprettelse. Vi finder ud af, at andre tags kan bruges mere end én gang til at oprette en webside, men dette hovedtag er et enkelt brugs-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

Læsning ville hjælpe med at forstå forskellige emner



Øver sig


Med studier er praksis et must at gøre i læring

Produktion:

10.

Dette tag er til at fremhæve specifikt indhold eller data. Med andre ord er dette tag nyttigt til at markere data. Lad os se et lille eksempel på dette nedenfor:

Kode:


I hele denne tekst, som jeg skriver nu, vil jeg markere denne tekst

Produktion:

11.

Dette tag indeholder de yderligere detaljer, som brugerne kan skjule alle detaljer på deres ønske. Gennem dette tag kan brugere åbne / lukke alt indhold, de har brug for. Hvis vi ønsker, at dette mærke skal afsløre dets detaljer i selve starten, kan attributtet “åben” bruges.

Nedenfor er et lille eksempel på det samme:

Kode:



Vises dette?

Produktion:

Hvad ville output være, hvis vi ikke brugte den åbne attribut?



Vises dette?

Output 1:

Output 2:

12.

Dette tag bruges i detaljen tag. Under detaljemærket kan vi have et resume, der specificerer hele resuméet af websiden eller HTML-dokumentet. En vigtig ting at bemærke her er, at resumémærket er det første barnemærke, der skal komme under detaljeringsmærket. Lad os finde et lille eksempel nedenfor:

Kode:



Have written this inside summary tag which is inside details tag

Denne tekst kommer kun under detaljeringsmærke


Disse tekstdata skrives efter afslutningen af ​​detaljeringsmærket

Output 1:

I ovenstående output havde vi fremhævet pilen, da vi får vores output 2, når vi udvider den.

Output 2:

Dette tag giver muligvis ikke nogen forskel

13.

Dette tag definerer dato / tid i et sådant format, som brugerne let kan forstå. Men en ting at bemærke er, at dette tag muligvis ikke giver os et ændret output i mange af browserne.

Kode:


På nuværende tidspunkt er 23:00 om natten.

Produktion:

14.

Som navnet allerede antyder, er dette tag til at skrive ethvert indhold i en boks. Dette tag skal have en åben attribut til visning af dialogboksen, når kildekoden er udført. Find et eksempel nedenfor:



De data, der er skrevet her, vises i en dialogboks

Produktion:

15.

Dette tag giver status for en bestemt opgave i en grafisk repræsentation. Vi skal her have det maksimale antal, som fremskridt skal repræsenteres for. Dette tag består hovedsageligt af to attributter. Maksimal og værdi er de to attributter. Max repræsenterer det samlede antal, der skal udfyldes, og værdi giver os de tælleprocent, der er færdig med hensyn til den maksimale tællerværdi. Et eksempel herpå er nedenfor:

Kode:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Produktion:

16.

Dette tag er til måling. Dette kan bruges til det plads, der tages af en forespørgsel eller brug af diskplads også. Der er et par attributter, der skal bruges med dette tag. Attributterne er maks, min og værdi. Baseret på deres brug kan vi bestemt finde ud af deres formål og anvendelse.

Kode:


EDCUBA


EDCUBA


EDCUBA

Brug af Meter-tag

I en lejlighed på 6 etager bor jeg i 2. sal:
2 ud af 6

Produktion:

17.

Dette er et tag, der er blevet introduceret for at tilføje videofiler til vores HTML-side. Indtil dette tag blev introduceret, brugte udviklere plugins til at introducere videofiler i HTL-sideindhold. Der er et par attributter, der kan bruges sammen med tagget. Autoplay, Preload, Dempet er nogle af disse.

Kode:







Vi har bare brug for et kildetag for at give kilden, hvorfra vi har brug for at uploade videoindholdet til vores side.

18.

Dette tag er til at tilføje lydfiler til vores HTML-side. Brugen og kildekoden ville være den samme som for videomærket. Som en øvelse kan du prøve at bruge alle de semantiske elementer og oprette en HTML 5 version webside for at lære bedre og hurtigere.

Konklusion

I denne artikel er vi nødt til at se mange semantiske elementer og deres anvendelse i HTML5. En vigtig ting at bemærke her er, at mange af disse tags understøttes af internet explorer-versioner større end 9 og kromversioner større end 3. Så fortsæt med at lære og øve for at få en bedre forståelse af brugen af ​​tags i HTML 5.

Anbefalede artikler

Dette er en guide til HTML5 semantiske elementer. Her diskuterer vi introduktionen og forskellige semantiske elementer i HTML5 sammen med dens kodeimplementering. Du kan også se på den følgende artikel for at lære mere -

  1. Top 10 nye HTML5-elementer
  2. HTML5-tags
  3. HTML5 webarbejdere
  4. Forskellig type HTML-begivenheder

Kategori: