Waarom kunnen we geen gewone div-tags gebruiken in plaats van section- en header-tags?

Het gebruik van semantische tags <section> en <header> in plaats van de universele <div> verbetert de toegankelijkheid en leesbaarheid van de code.

1. Toegankelijkheid: Screenreaders en andere assistieve technologieën gebruiken semantische tags om de structuur van de inhoud te begrijpen. <header> geeft het inleidende deel aan (bijvoorbeeld logo, navigatie), <section> is een thematische blok. <div> op zichzelf heeft geen semantische lading.

2. SEO (Zoekmachineoptimalisatie): Zoekmachines indexeren beter de met semantische tags gestructureerde inhoud, wat de ranking kan verbeteren.

3. Leesbaarheid en onderhoudbaarheid van de code: Semantische tags documenteren de structuur van zichzelf. De ontwikkelaar die de code leest, begrijpt onmiddellijk de functie van het blok, zonder zich in stijlen of commentaar te verdiepen.

Kort samengevat: <div> is geschikt voor het groeperen van elementen wanneer semantiek niet belangrijk is (bijvoorbeeld voor het toepassen van stijlen). <section> en <header> dragen een semantische lading en maken webpagina's begrijpelijker voor zowel machines als mensen.

Voorbeeld:

<!-- Semantisch correcte structuur -->
<header>
  <h1>Naam van de site</h1>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</header>

<section>
  <h2>Sectietitel</h2>
  <p>Inhoud van de sectie...</p>
</section>

<!-- Voorbeeld van het gebruik van div, dat geen semantiek overbrengt -->
<div> <!-- header? sectie? onbekend -->
  <h1>Naam van de site</h1>
  <div> <!-- nav? -->
    <ul>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>

<div> <!-- sectie? -->
  <h2>Sectietitel</h2>
  <p>Inhoud van de sectie...</p>
</div>