Inleiding tot semantische elementen van HTML5

Het volgende artikel biedt u verschillende semantische elementen in html5. Laten we beginnen met begrip van Semantiek. Bij Semantics draait het allemaal om verschillende soorten tags die door de functionaliteit worden afgebeeld en dezelfde functie hebben als bij de tagnaam. De functionaliteit van de tag zou gemakkelijk te herkennen zijn aan de naam; die in een voor de gebruiker begrijpelijke naam / indeling is. De meeste elementen in HTML zijn over het algemeen semantische elementen.

Voordelen van semantische elementen in HTML5

voordelen van semantische elementen zijn als volgt:

  • Eenvoudig begrip van code.
  • Onderhoud kan snel en op de juiste manier worden uitgevoerd.
  • Het is niet nodig om voor elke tag een beschrijving toe te voegen.

Verschillende semantische elementen in HTML5

Laten we nu ingaan op de semantische elementen van HTML5.

1.

Deze tag geeft ons een idee dat de gegevens in deze tag specifiek voor vergelijkbare inhoud zijn. Het hangt af van de verschillende soorten artikelen die we over het algemeen ook hebben. Dit kan een blog, forums, artikelen in kranten, enz. Zijn.

Code:



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

Output:

2.

Deze tag gaat over het leveren van een sectie-inhoud van de totale gegevens. Als u weet over het gebruik van zowel artikel- als sectietags, kunnen die tags in elke tag worden gebruikt. Dat is sectie tag kan worden gebruikt in de artikel-tag en vice versa.

Code:


The section here is about:

Leren en oefenen

Output:

3.

Deze tag geeft alle kopgegevens. Alle gegevens die we in de koptekstindeling willen plaatsen, worden onder deze koptag gebruikt. En deze tag kan een aantal keren in de hele HTML-scripts worden gebruikt. Laten we er een klein voorbeeld van bekijken.

Code:



This is header #1



This is header #1



This is header #1

Eerste


volgende …

Dit is kop # 2


Tweede

Output:

4.

Dit is de voettekstsectie in ons HTML-script. Over het algemeen zien we alle auteursrechtgegevens en het kleine gedeelte dat we vinden onder aanbiedingen zoals 'voorwaarden zijn van toepassing' op aanbiedingen. Deze dingen worden dus gedefinieerd onder de voetteksttag.

Code:


Binnenzijde body en boven voettekst

Binnen voettekst tag.


Nog een voettekst

Voorwaarden zijn van toepassing

Output:

5.

Deze tag geeft ons de navigatie-elementen. De URL in elk HTML-document waarin we meestal van deze pagina naar een andere pagina willen navigeren. Alle gegevens die onder deze tag worden gegeven, zijn beschikbaar als hyperlinks. Deze hyperlinks kunnen handig zijn bij het navigeren van de ene sectie naar een andere sectie. Een klein voorbeeld is gedefinieerd als:

Code:


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

Output:

Klik tijdens het oefenen op die links en controleer hoe de kleur van de hyperlink verandert bij het klikken.

6.

Dit is een tag die wordt gebruikt om de gegevens aan de zijkanten van ons HTML-document weer te geven. Op veel websites kunnen we inhoud vinden die zich in een zijbalk bevindt, die wordt weergegeven met deze opzij-tag. Deze inhoud moet in overeenstemming zijn met de andere gegevens in het document. Laten we er een klein voorbeeld van bekijken.

Code:


Hoe opzij tag wordt gebruikt

Binnenzijde opzij tag


Inhoud binnen opzij tag

Output:

De exacte inhoud kan niet volledig op dezelfde manier worden gespecificeerd, het kan alleen worden gedocumenteerd en duidelijk worden begrepen terwijl de hele HTML-pagina wordt gebruikt.

7.

Deze tag geeft aan dat we een afbeelding gaan toevoegen. Deze tag kan worden gebruikt om een ​​afbeeldingsbron op te geven en een gif of afbeelding weer te geven.

Code:





Zoals hierboven vermeld, is dat hoe we de afbeeldingstag kunnen definiëren. Binnen de afbeeldingstag kunnen we onze afbeeldingopdracht specificeren met een brontag. Binnen deze afbeeldingstag kunnen we op hun beurt de afbeeldingstag gebruiken.

8.

Deze tag wordt gebruikt om een ​​onderschrift te geven onder de afbeelding die wordt verstrekt. Het kan worden gebruikt in de afbeeldingstag. Het gebruik hiervan is te zien in het onderstaande voorbeeld.




This is description of the image attached.

U kunt proberen hetzelfde uit te voeren door een afbeeldingsbron te geven en te controleren hoe de uitvoer wordt weergegeven.

9.

Deze tag geeft alle kenmerken en de volledige inhoud van de HTML-site aan. Het bevat alle unieke inhoud. Een belangrijk ding om op te merken voor deze specifieke tag is dat deze tag slechts één keer kan worden gebruikt bij het maken van de totale pagina. We vinden dat andere tags meer dan eens kunnen worden gebruikt bij het maken van een webpagina, maar deze hoofdtag is een tag voor eenmalig gebruik.

Code:



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

Lezen zou helpen om verschillende onderwerpen te begrijpen


Beoefenen


Met studeren is oefenen een must bij het leren

Output:

10.

Deze tag is bedoeld om specifieke inhoud of gegevens te markeren. Met andere woorden, deze tag is handig bij het markeren van gegevens. Laten we hieronder een klein voorbeeld hiervan bekijken:

Code:


In deze hele tekst die ik nu schrijf, wil ik deze tekst markeren

Output:

11.

Deze tag bevat de aanvullende details, waarmee gebruikers alle details op hun wens kunnen verbergen. Via deze tag kunnen gebruikers alle inhoud openen / sluiten die ze nodig hebben. Als we willen dat die tag de details aan het begin zelf onthult, kan het kenmerk 'open' worden gebruikt.

Hieronder is een klein voorbeeld van hetzelfde:

Code:



Wordt dit weergegeven?

Output:

Wat zou de uitvoer zijn als we het kenmerk open niet zouden gebruiken?



Wordt dit weergegeven?

Uitgang 1:

Uitgang 2:

12.

Deze tag wordt gebruikt in de detailtag. Onder de details-tag kunnen we een samenvattingstag hebben die de volledige samenvatting van de webpagina of het HTML-document specificeert. Een belangrijk ding om op te merken is dat de samenvattingstag de eerste onderliggende tag is die onder de detailtag moet vallen. Laten we hieronder een klein voorbeeld vinden:

Code:



Have written this inside summary tag which is inside details tag

Deze tekst komt alleen onder de details tag

Deze tekstgegevens worden geschreven na voltooiing van de details-tag

Uitgang 1:

In de bovenstaande uitvoer hadden we de pijl gemarkeerd, omdat we onze uitvoer 2 krijgen zodra we deze uitbreiden.

Uitgang 2:

Deze tag geeft mogelijk geen verschil

13.

Deze tag definieert de datum / tijd in een indeling die gebruikers gemakkelijk kunnen begrijpen. Maar een ding om op te merken is dat deze tag ons in veel van de browsers mogelijk geen gewijzigde uitvoer geeft.

Code:


Momenteel is het 23.00 uur 's avonds.

Output:

14.

Zoals de naam al suggereert, is deze tag bedoeld voor het schrijven van inhoud in een vak. Deze tag moet een open kenmerk hebben om het dialoogvenster weer te geven zodra de broncode is uitgevoerd. Vind hieronder een voorbeeld:



De gegevens die hier worden geschreven, worden weergegeven in een dialoogvenster

Output:

15.

Deze tag geeft de voortgang van een bepaalde taak in een grafische weergave. We moeten hier het maximale aantal hebben waarvoor de voortgang moet worden weergegeven. Deze tag bestaat hoofdzakelijk uit twee attributen. Max en waarde zijn de twee attributen. Max vertegenwoordigt de totale telling die moet worden voltooid en Waarde geeft ons het tellingpercentage dat is voltooid ten opzichte van de maximale telwaarde. Een voorbeeld hiervan is hieronder:

Code:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:


EDUCBA
Your learning progress is:

Output:

16.

Deze tag is voor meting. Dit kan worden gebruikt voor de ruimte die wordt ingenomen door een query of voor het gebruik van schijfruimte. Er zijn enkele attributen die met deze tag moeten worden gebruikt. De attributen zijn max, min en waarde. Op basis van hun gebruik kunnen we hun doel en gebruik zeker achterhalen.

Code:


EDCUBA


EDCUBA


EDCUBA

Gebruik van metertag

In een appartement met 6 verdiepingen woon ik op de 2e verdieping:
2 uit 6

Output:

17.

Dit is een tag die is geïntroduceerd om videobestanden toe te voegen aan onze HTML-pagina. Tot deze tag werd geïntroduceerd, gebruikten ontwikkelaars plug-ins om videobestanden in HTL-pagina-inhoud te introduceren. Er zijn enkele attributen die samen met de tag kunnen worden gebruikt. Autoplay, Preload, Muted zijn enkele van deze.

Code:







We hebben alleen een brontag nodig om de bron te geven van waaruit we de video-inhoud naar onze pagina moeten uploaden.

18.

Deze tag is voor het toevoegen van audiobestanden aan onze HTML-pagina. Het gebruik en de brontag zouden hetzelfde zijn als die van de videotag. Probeer als oefening alle semantische elementen en maak een e-HTML 5-versiepagina om beter en sneller te leren.

Conclusie

In dit artikel moeten we veel semantische elementen en hun gebruik in HTML5 zien. Een belangrijk ding om hier op te merken, is dat veel van deze tags worden ondersteund door Internet Explorer-versies groter dan 9 en Chrome-versies groter dan 3. Dus blijf leren en oefenen om een ​​beter inzicht te krijgen in het gebruik van tags in HTML 5.

Aanbevolen artikelen

Dit is een handleiding voor de HTML5 Semantic Elements. Hier bespreken we de introductie en verschillende semantische elementen in HTML5 samen met de implementatie van de code. U kunt ook het volgende artikel bekijken voor meer informatie -

  1. Top 10 HTML5 nieuwe elementen
  2. HTML5-tags
  3. HTML5-webwerkers
  4. Verschillende soorten HTML-gebeurtenissen