Wat is semantiek in de context van webontwikkeling…

Semantiek in webontwikkeling betekent het gebruik van HTML-tags volgens hun semantische betekenis, niet alleen voor styling. Het helpt bij het beschrijven van de structuur en betekenis van de inhoud, waardoor een webpagina begrijpelijker wordt voor browsers, zoekmachines, schermlezers en andere parsers.

De belangrijkste voordelen van semantische markup:

Toegankelijkheid: Verbeterde interactie met de site voor mensen met beperkingen die schermlezers gebruiken.
SEO: Helpt zoekmachines de structuur en inhoud van de pagina beter te begrijpen, wat positief is voor de ranking.
Onderhoudbaarheid: Maakt de code leesbaarder en begrijpelijker voor andere ontwikkelaars.
Compatibiliteit: Zorgt voor correcte weergave van de inhoud op verschillende apparaten en browsers.

Voorbeelden van semantische tags in HTML5:

<header>: Vertegenwoordigt de introductie of navigatie voor het hele document of een specifieke sectie.
<nav>: Vertegenwoordigt een groep navigatielinks.
<main>: Vertegenwoordigt de hoofdinhoud van het document.
<article>: Vertegenwoordigt een afgerond, zelfstandig inhoudsfragment dat onafhankelijk kan worden verspreid (bijvoorbeeld een blogpost, nieuwsbericht).
<section>: Vertegenwoordigt een zelfstandige inhoudssectie in het document.
<aside>: Vertegenwoordigt inhoud die indirect gerelateerd is aan de hoofdinhoud van de pagina (bijvoorbeeld een zijbalk).
<footer>: Vertegenwoordigt de voettekst voor het hele document of een specifieke sectie.
<figure> en <figcaption>: Vertegenwoordigen een mediaplaatje (afbeelding, diagram, etc.) en de beschrijving ervan.
<time>: Vertegenwoordigt datum en tijd.

Vergelijking tussen semantische en niet-semantische aanpak:

Niet-semantisch	Semantisch
Gebruik van `<div>` en `<span>` voor alles	Gebruik van specifieke tags (`<header>`, `<nav>`, `<article>`)
Beschrijving van structuur via klassen (`class="header"`)	Gebruik van tags die de structuur inherent beschrijven
Afhankelijkheid van CSS voor begrip van structuur	De structuur is begrijpelijk uit de HTML-code

Voorbeeld van niet-semantische markup:

<!-- non-semantic.html -->
<div class="header">
  <div class="logo"></div>
  <div class="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Over</a></li>
    </ul>
  </div>
</div>
<div class="content">
  <div class="article">
    <h2>Titel</h2>
    <p>Inhoud...</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023</p>
</div>

Voorbeeld van semantische markup:

<!-- semantic.html -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Over</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Titel</h2>
    <p>Inhoud...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023</p>
</footer>

Semantische markup vervangt niet CSS voor styling, maar maakt het HTML-document informatiever en nuttiger voor verschillende inhoudsgebruikers.

Wat is semantiek in de context van webontwikkeling?