U hoeft niet elke keer div-tags te gebruiken. Gebruik deze semantische HTML-tags om uw site meer gestructureerd en toegankelijker te maken.
Vóór de introductie van semantische HTML gebruikten ontwikkelaars div's om inhoud te rangschikken. Div-elementen hebben op zichzelf geen betekenis. Ze bieden alleen een manier om stijlen toe te passen en inhoud te ordenen.
Het woord semantisch betekent met betrekking tot betekenis. Semantische HTML-elementen beschrijven het doel van hun inhoud. Ze geven betekenis aan de ontwikkelaar, gebruiker, zoekmachines en ondersteunende technologieën. Hier is een lijst met populaire semantische HTML-tags die u in uw volgende project kunt gebruiken.
Wat zijn div's?
In HTML is het div-element (divisie) een container op blokniveau. U gebruikt een div om HTML-elementen op een webpagina te groeperen of te verdelen in secties. De syntaxis is zoals hieronder weergegeven:
<div>
div>
Voordelen van het gebruik van semantische HTML-elementen boven divs
HTML5 introduceerde semantische HTML-elementen om het lezen van code gemakkelijker te maken. Semantische elementen geven betekenis en structuur aan webcontent.
Ze maken uw code begrijpelijk voor andere ontwikkelaars. Ze maken het ook gemakkelijker voor zoekmachines om uw inhoud te vinden en verkeer naar uw site te leiden. Hier zijn enkele semantische elementen die u kunt gebruiken in uw HTML- en CSS-projecten.
1.
De tag definieert het kopgedeelte van een document. Meestal bevat het het sitelogo, de navigatie en de titel van de pagina. Het is het gedeelte dat bovenaan een webpagina verschijnt. U kunt de koptekst aanpassen aan uw behoefte. De syntaxis is als volgt:
<lichaam><koptekst>
<h1> Hoi!h1>
<P>Ik ben een kopmanP>
koptekst>
lichaam>
2.
De tag bevat de navigatielinks voor de website. Dit kunnen menu's, inhoudsopgaven of indexen zijn. Het wordt meestal binnen de geplaatst label. De syntaxis is als volgt:
<koptekst><navigatie>
<ul>
<li>Mijn websitelinksli>
<li><Ahref="#"> ThuisA>li>
<li ><Ahref="#"> Over ons A>li>
ul>
navigatie>
<h1>Het bovenstaande is het navigatiegedeelte van mijn website.h1>
koptekst>
In de browser ziet het er zo uit:
U kunt CSS-lay-outmodellen gebruiken, zoals CSS-flexbox uitlijnen
3.
De tag bevat de hoofdinhoud van de webpagina. Het scheidt de inhoud van de koptekst, zijbalk en voettekst. De belangrijkste vertegenwoordigt de dominante inhoud van de sectie.
<lichaam><koptekst>
<titel> Feiten over websites titel>
koptekst>
<voornaamst>
<P> Deze website is een korte demonstratie van hoe de hoofdtag werkt.P>
<P> Het omsluit het deel van de website met nuttige inhoud.P>
voornaamst>
<voettekst>
<h3> Dit is een voettekst h3>
voettekst>
lichaam>
Het ziet er zo uit:
4.
Gebruik de tag om op zichzelf staande secties in een document of website te definiëren. U kunt ze bijvoorbeeld gebruiken om blogberichten, tijdschriften of productkaarten te structureren. De element kan andere elementen bevatten, inclusief andere artikelen, secties en koppen. De bijgevoegde elementen moeten betrekking hebben op het onderwerp van het artikel.
<artikel>
<h1>Vreemder dan fictieh1><artikel>
<h3>Invoeringh3>
<P>De gebeurtenissen en personen die in dit boek worden verteld, zijn fictief.P>
artikel>
<artikel>
<h3>Hoofdstuk eenh3>
<P> De dag was helder en de zon lachte vanuit de luchtP>
artikel>
artikel>
Het ziet er zo uit:
5.
De tag bevat de inhoud gerelateerd aan de hoofdinhoud. Gebruik deze tag om zijbalken te maken voor citaten, opmerkingen of shout-outs. markeert informatie die de lezer zou kunnen missen. Het onderscheidt zich van de rest van de inhoud.
html><html>
<stijl>
lichaam{
achtergrondkleur:#abdbe3;
}
opzij {
breedte: 30%;
padding-links: 0.5rem;
marge-links: 1rem;
flex: links;
vakschaduw: inzet 5px 0 5px -5px groen;
lettertypestijl: cursief;
kleur rood;
}
terzijde > p {
marge: 0,5rem;
stijl>
<lichaam>
<voornaamst>
<h1> Wever Vogelsh1>
<P>Ploceidae is een familie van kleine zangvogels. Velen daarvan worden wevers, wevervogels, weversvinken en bisschoppen genoemd.P>
<opzij>
<P>Koninkrijk: Animalia
Stam: ChordataP>opzij>
<P>In de meest recente classificaties is Ploceidae een clade, met uitzondering van enkele vogels die historisch in de familie zijn geplaatst. Sommige van de mussen, maar omvat de monotypische onderfamilie Amblyospizinae.P>
voornaamst>
lichaam>
html>
6.
De element bevat een deel van de pagina zonder specifiek semantisch element. Secties kunnen een kop hebben om de inhoud te introduceren en andere HTML-elementen in te sluiten. vertegenwoordigt de componenten van een webpagina zoals hoofdstukken in een boek of blog.
html><html>
<lichaam>
<h1>De Bijbelh1>
<sectie>
<h2>Invoeringh2>
<P>De Bijbel is een verzameling religieuze geschriften die heilig zijn in het christendom, het jodendom en het samaritanisme. De Bijbel is een bloemlezing – een compilatie van teksten in verschillende vormen – oorspronkelijk geschreven in het Hebreeuws, Aramees en Koine-Grieks.P>
sectie>
<sectie>
<h2>Hoofdstuk één: Genesish2>
<P>Het boek Genesis is het eerste boek van de Hebreeuwse Bijbel en het christelijke Oude Testament. De Hebreeuwse naam is dezelfde als het eerste woord, Bereshit. Genesis is een verslag van de schepping van de wereld, de vroege geschiedenis van de mensheid en van de voorouders van Israël en de oorsprong van het Joodse volkP>
sectie>lichaam>
html>
Het ziet er zo uit:
7.
De elementen sluiten op zichzelf staande illustraties zoals afbeeldingen of diagrammen. Deze illustraties verwijzen naar inhoud op de hoofdpagina. De figuren zijn voorzien van bijschriften gespecificeerd door de element. De legt uit waar de afbeelding over gaat. De
html><html>
<lichaam>
<voornaamst>
<sectie>
<h1>Delen van een computerh1>
<P> Er zijn verschillende onderdelen die samenwerken om een computer te vormenP>
<figuur>
<imgsrc="sommige-url.jpg"alt="computermuis">
<figuurbijschrift>Dit is een computermuisfiguurbijschrift>
figuur>
sectie>
voornaamst>
lichaam>
html>
Je kunt verder gaan en leren hoe responsieve afbeeldingen te maken in HTML.
De HTML-element bevat informatie onderaan de webpagina. Het is het tegenovergestelde van de element. De kan informatie bevatten over de eigenaar van de pagina. Dit omvat copyrightgegevens of links naar aanvullende informatie van de site.
html><html>
<lichaam>
<voornaamst>
<sectie>
<h1>Delen van een computerh1>
<figuur>
<imgsrc="sommige-url.jpg"alt="computermuis">
<figuurbijschrift>Dit is een computermuisfiguurbijschrift>
figuur>
sectie>
voornaamst>
<voettekst>
<P> Vervaardigd door ComputerTech © 2023P>
voettekst>
lichaam>
html>
De bovenstaande code voegt een voettekst toe aan het Delen van een computer pagina zoals weergegeven in de volgende afbeelding.
Waarom semantische HTML-elementen gebruiken?
Het gebruik van semantische HTML-elementen geeft context aan de code. Iedereen die naar de code kijkt, kan het gemakkelijk begrijpen. De tags maken het gemakkelijker om elementen te stylen en samen te werken aan projecten.
U kunt semantische HTML gebruiken met frontend-bibliotheken en frameworks. De meeste moderne webbrowsers geven de voorkeur aan semantische HTML-elementen boven traditionele elementen. Begin met het gebruik van semantische HTML en zie hoe uw code er modern, leesbaar en toonbaar uitziet.
