Wat zijn semantische elementen in HTML en waar zijn ze voor nodig?

Semantische elementen in HTML zijn tags (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) die de semantische betekenis van de inhoud die ze omringen beschrijven, niet alleen hun uiterlijk.

Hoofd doel:

• Toegankelijkheid: Helpen assistieve technologieën (zoals schermlezers) om de structuur en inhoud van de pagina te begrijpen, waardoor de inhoud toegankelijk wordt voor gebruikers met beperkingen.
• SEO (Zoekmachineoptimalisatie): Pagina's met semantische markup worden beter geïndexeerd en gerangschikt door zoekmachines, omdat ze de hoofdinhoud en de relevantie voor zoekopdrachten nauwkeuriger kunnen bepalen.
• Ontwikkeling en onderhoud: Verbeteren de leesbaarheid en onderhoudbaarheid van de code, waardoor de structuur van de pagina voor andere ontwikkelaars (en voor jezelf in de toekomst) duidelijker wordt.
• Verbeterd begrip van de structuur: Stellen je in staat om de logische blokken van de pagina (navigatie, hoofdinhoud, voettekst, enz.) duidelijk te scheiden.

Voorbeeld van niet-semantische markup:

<div>
  <h2>Artikel titel</h2>
  <p>Inhoud van het artikel...</p>
</div>
<div>
  <h3>Sidebar</h3>
  <p>Informatie over de sidebar...</p>
</div>

Voorbeeld van semantische markup:

<article>
  <h2>Artikel titel</h2>
  <p>Inhoud van het artikel...</p>
</article>
<aside>
  <h3>Sidebar</h3>
  <p>Informatie over de sidebar...</p>
</aside>

Het gebruik van semantische elementen helpt bij het maken van meer gestructureerde, toegankelijke en zoekmachine-geoptimaliseerde webpagina's.