Introduktion till HTML5 semantiska element

Följande artikel ger dig olika semantiska element i html5. Låt oss börja med att förstå Semantik. Semantik handlar om olika typer av taggar som funktionalitet skulle skildra och utföra samma funktion som per dess taggnamn. Taggens funktionalitet skulle lätt förstås med dess namn; som är i ett användarförståeligt namn / format. De flesta av elementen i HTML är i allmänhet semantiska element.

Fördelar med semantiska element i HTML5

fördelarna med semantiska element är följande:

  • Lätt kodförståelse.
  • Underhåll kan utföras snabbt och på lämpligt sätt.
  • Det finns inget behov av att lägga till någon beskrivning specifikt för någon tagg.

Olika semantiska element i HTML5

Låt oss nu gå in på de semantiska elementen i HTML5.

1.

Den här taggen ger oss en aning om att uppgifterna i denna tagg specifikt är för liknande innehåll. Det beror på de olika typerna av artiklar som vi i allmänhet också har. Det kan vara en blogg, forum, kolumnartiklar i tidningar etc.

Koda:



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.

Den här taggen handlar om att tillhandahålla ett sektionsinnehåll av den totala datan. När du vet om att använda både artikel- och avsnittstaggar kan dessa taggar användas i varje tagg. Det är avsnitt tagg kan användas i artikeln taggen och vice versa.

Koda:


The section here is about:

Lärande och öva

Produktion:

3.

Den här taggen ger all rubrikdata. All data som vi vill placera i rubrikformatet används under denna rubriktagg. Och den här taggen kan användas flera gånger i hela HTML-skriptet. Låt oss se ett litet exempel på det.

Koda:



This is header #1



This is header #1



This is header #1

Den första

nästa …

Detta är rubrik nr 2


Den andra

Produktion:

4.

Detta är sidfoten i vårt HTML-skript. Generellt sett ser vi alla upphovsrättsuppgifter och det lilla avsnittet vi hittar under alla erbjudanden som "villkor gäller" för alla erbjudanden. Så dessa saker definieras under sidfot-taggen.

Koda:

Insidan av kroppen och ovan fotfot tagg

Insidan av sidfotens tagg.



En annan sidfot tagg

Villkor gäller

Produktion:

5.

Den här taggen ger oss navigationselementen. URL: en i alla HTML-dokumentskript där vi i allmänhet vill navigera från en sida till en annan sida genom den här taggen. All information som ges under denna tagg är tillgänglig som hyperlänkar. Dessa hyperlänkar kan vara användbara när du navigerar från ett avsnitt till ett annat avsnitt. Ett litet exempel definieras som:

Koda:


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:

När du övar klickar du på dessa länkar och kontrollerar hur färgen på hyperlänken ändras när du klickar.

6.

Detta är en tagg som används för att visa data på sidorna av vårt HTML-dokument. På många webbplatser kan vi hitta innehåll som finns i en sidofält som visas med denna sida tagg. Detta innehåll ska vara i linje med andra data som finns i dokumentet. Låt oss se ett litet exempel på det.

Koda:

Hur sidan tagg används

Insidan tagg


Innehåll inuti taggen

Produktion:

Det exakta innehållet kan inte specificeras helt på samma sätt, det kan bara dokumenteras och förstås tydligt när man använder hela HTML-sidan.

7.

Den här taggen anger att vi ska bifoga en bild. Den här taggen kan användas för att ange en bildkälla och visa en gif eller bild.

Koda:





Som nämnts ovan är det så vi kan definiera figurtaggen. Inuti figurtaggen kan vi ange vårt bildkommando med en källtagg. Inuti denna figurtagg kan vi i sin tur använda figurtexten.

8.

Den här taggen används för att ge bildtexter under den medföljande bilden. Det kan användas inuti figurtaggen. Användning av detta kan ses i nedanstående exempel.




This is description of the image attached.

Du kan prova att utföra samma genom att ange en bildkälla och kontrollera hur utgången visas.

9.

Den här taggen specificerar alla attribut och hela innehållet på HTML-webbplatsen. Den innehåller allt det unika innehållet. En viktig sak att lägga märke till för denna specifika tagg är att den här taggen endast kan användas en gång i den totala sidbilden. Vi upptäcker att andra taggar kan användas mer än en gång för att skapa en webbsida, men denna huvudtagg är en tagg med en enda användning.

Koda:



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 skulle hjälpa till att förstå olika ämnen



Praktiserande


Med att studera är att öva ett måste att göra i lärandet

Produktion:

10.

Den här taggen är avsedd för att markera specifikt innehåll eller data. Med andra ord är den här taggen användbar vid markering av data. Låt oss se ett litet exempel på detta nedan:

Koda:

I hela denna text som jag skriver nu vill jag markera denna text

Produktion:

11.

Den här taggen innehåller ytterligare detaljer, så att användare kan dölja alla detaljer på deras önskemål. Genom denna tagg kan användare öppna / stänga allt innehåll de behöver. Om vi ​​vill att den taggen ska avslöja dess detaljer i själva starten, kan attributet "öppet" användas.

Nedan är ett litet exempel på samma:

Koda:

Visas detta?

Produktion:

Vad skulle nu vara resultatet om vi inte använde det öppna attributet?

Visas detta?

Utgång 1:

Utgång 2:

12.

Den här taggen används i detaljen taggen. Under detaljen kan vi ha en sammanfattningstagg som anger hela sammanfattningen av webbsidan eller HTML-dokumentet. En viktig sak att notera här är att den sammanfattande taggen är den första barn taggen som måste komma under detaljer taggen. Låt oss hitta ett litet exempel nedan:

Koda:



Have written this inside summary tag which is inside details tag

Den här texten kommer bara till under etikett

Denna textdata skrivs efter detaljen av etiketten

Utgång 1:

I ovanstående utgång hade vi markerat pilen, eftersom vi får vår utgång 2 när vi expanderar den.

Utgång 2:

Den här taggen kanske inte ger någon skillnad

13.

Den här taggen definierar datum / tid i ett sådant format som användare lätt kan förstå. Men en sak att notera är att den här taggen kanske inte ger oss en förändrad utgång i många av webbläsarna.

Koda:

För närvarande är 23:00 på natten.

Produktion:

14.

Som namnet redan antyder är den här taggen för att skriva något innehåll i en ruta. Den här taggen ska ha ett öppet attribut för att visa dialogrutan när källkoden har körts. Hitta ett exempel nedan:

Uppgifterna som skrivs här visas i en dialogruta

Produktion:

15.

Denna tagg ger framstegen för en viss uppgift i en grafisk representation. Vi måste här ha det maximala antalet för vilka framstegen måste representeras. Den här taggen består huvudsakligen av två attribut. Max och värde är de två attributen. Max representerar det totala antalet som måste slutföras och Value ger oss de räkneprocenten som är färdiga med avseende på det maximala räknarvärdet. Ett exempel på det är nedan:

Koda:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Produktion:

16.

Den här taggen är för mätning. Detta kan användas för det utrymme som tas av en fråga eller användning av diskutrymme också. Det finns några attribut som ska användas med den här taggen. Attributen är max, min och värde. Baserat på deras användning kan vi definitivt ta reda på deras syfte och användning.

Koda:


EDCUBA


EDCUBA


EDCUBA

Användning av Meter-taggen

I en lägenhet på 6 våningar bor jag i 2: a våningen:
2 av 6

Produktion:

17.

Detta är en tagg som har introducerats för att lägga till videofiler på vår HTML-sida. Fram tills den här taggen introducerades använde utvecklare plugins för att introducera videofiler i HTL-sidinnehåll. Det finns några attribut som kan användas tillsammans med taggen. Autoplay, Preload, Muted är några av dessa.

Koda:


Vi behöver bara en källkod för att ge källan där vi behöver ladda upp videoinnehållet till vår sida.

18.

Den här taggen är avsedd för att lägga till ljudfiler på vår HTML-sida. Användningen och källtaggen skulle vara densamma som för videotaggen. Som en övning kan du prova att använda alla semantiska element och skapa en HTML 5-version för att lära dig bättre och snabbare.

Slutsats

I den här artikeln måste vi se många semantiska element och deras användning i HTML5. En viktig sak att notera här är att många av dessa taggar stöds av Internet Explorer-versioner större än 9 och kromversioner större än 3. Så fortsätt att lära dig och öva för att få en bättre förståelse för användningen av taggar i HTML 5.

Rekommenderade artiklar

Detta är en guide till HTML5 Semantiska element. Här diskuterar vi introduktionen och olika semantiska element i HTML5 tillsammans med dess kodimplementering. Du kan också titta på följande artikel för att lära dig mer -

  1. Topp 10 nya HTML5-element
  2. HTML5-taggar
  3. HTML5 webbarbetare
  4. Olika typer av HTML-händelser

Kategori:

Mjukvaruutveckling