Semantische HTML: 10 veelgemaakte fouten (en de juiste tags)

Een HTML-pagina kan er perfect uitzien en toch slecht geschreven zijn. Overal div‘s, vet tekst met b, koppen gekozen om hun grootte: de browser toont alles zonder klagen, maar schermlezers, zoekmachines en je collega’s verliezen de informatie die de tags eigenlijk moesten dragen. Dat is wat semantische HTML wordt genoemd: de tag gebruiken die zegt wat de inhoud is, niet alleen hoe hij eruit moet zien. Hier zijn de tien meest voorkomende fouten en hun oplossing.

Waarom semantiek ertoe doet

• Toegankelijkheid. Een schermlezer biedt aan om direct naar de navigatie, de hoofdinhoud of de footer te springen. Dat kan alleen als nav, main en footer bestaan. Met div’s hoort de gebruiker een platte pagina.
• SEO. Zoekmachines steunen op de structuur om de hoofdinhoud, de koppen en de relaties tussen secties te herkennen. Een nette hiërarchie wordt meteen begrepen, een soep van div’s moet geraden worden.
• Onderhoud. <nav> lees je zonder commentaar, <div class="nv2"> vereist dat je de CSS erbij opent. Semantische code is zes maanden later nog te herlezen.
• Gratis gedrag. Een button reageert op het toetsenbord, een a opent in een nieuw tabblad bij een middelklik, een label vergroot het klikbare gebied van een checkbox. Stuk voor stuk dingen die je met de hand moet nabouwen als je vals speelt met div‘s.

Fout 1: div’s in plaats van header, nav, main en footer

De structuur van een pagina heeft eigen tags. Een div met een id header is voor de browser geen header.

Doe dit niet:

<div id="header">…</div>
<div id="menu">…</div>
<div id="content">…</div>
<div id="footer">…</div>

Doe dit:

<header>…</header>
<nav aria-label="Navigation principale">…</nav>
<main>…</main>
<footer>…</footer>

Elk van deze tags draagt een impliciete rol (banner, navigation, main, contentinfo) die hulptechnologieën herkennen. main moet uniek zijn op de pagina, header en footer mogen zich herhalen binnen een article.

Fout 2: een bijschrift bij een afbeelding in een paragraaf

Een afbeelding en het bijbehorende bijschrift vormen een geheel. De tag figure koppelt ze, figcaption draagt het bijschrift.

Doe dit niet:

<img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
<p>Le mont Blanc, juillet 2026</p>

Doe dit:

<figure>
  <img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
  <figcaption>Le mont Blanc, juillet 2026</figcaption>
</figure>

figure is ook geschikt voor een codeblok, een grafiek of een citaat met een bijschrift.

Fout 3: b en i om te benadrukken

b en i beschrijven een uiterlijk. strong en em beschrijven een bedoeling: sterk belang, nadruk op een woord. Een schermlezer kan van intonatie veranderen bij em, nooit bij i.

Doe dit niet:

<b>Attention</b> : ce réglage est <i>irréversible</i>.

Doe dit:

<strong>Attention</strong> : ce réglage est <em>irréversible</em>.

b en i zijn niet verboden: ze houden een precies gebruik, een gemarkeerd trefwoord zonder bijzonder belang voor b, een vreemde term of een scheepsnaam voor i. Wil je alleen decoratief vet, dan is dat CSS: font-weight: 700.

Fout 4: een kapotte koppenhiërarchie

De tags h1 tot h6 vormen het plan van het document. Een h4 kiezen omdat hij “de juiste grootte” heeft, breekt dat plan: schermlezers navigeren van kop naar kop, zoekmachines leiden er de structuur uit af.

Doe dit niet:

<h1>Nos services</h1>
<h4>Développement</h4>     <!-- saut de h1 à h4 -->
<h1>Hébergement</h1>       <!-- second h1 pour une sous-partie -->

Doe dit:

<h1>Nos services</h1>
  <h2>Développement</h2>
    <h3>Sites vitrine</h3>
  <h2>Hébergement</h2>

Eén h1 per pagina, geen overgeslagen niveau, en het formaat regel je in CSS. Moet een titel er visueel klein uitzien, dan is dat h2 { font-size: 1.1rem }, geen h5.

Fout 5: section en article door elkaar gehaald, of overal voor gebruikt

article staat voor zelfstandige inhoud, die ook los van de pagina betekenis zou houden: een blogpost, een reactie, een productfiche. section groepeert thematische inhoud binnen een geheel, en zou altijd een titel moeten hebben. Een div blijft de juiste keuze voor een simpele lay-outgroepering.

Doe dit niet:

<section>
  <section><img src="logo.svg" alt="Gekkode"></section>
  <section>Du texte sans titre</section>
</section>

Doe dit:

<article>
  <h2>Titre du billet</h2>
  <section>
    <h3>Première partie</h3>
    …
  </section>
</article>

<div class="colonnes">…</div> <!-- pure mise en page : div -->

Fout 6: een link die als button dient, en omgekeerd

Een link (a) leidt ergens naartoe. Een button (button) triggert een actie: versturen, een menu openen, een venster tonen. Een a href="#" met een click-handler is geen van beide, en een klikbare div is noch met het toetsenbord, noch voor schermlezers toegankelijk.

Doe dit niet:

<a href="#" onclick="ouvrirMenu()">Menu</a>
<div class="btn" onclick="envoyer()">Envoyer</div>

Doe dit:

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button>
<button type="submit">Envoyer</button>
<a href="https://www.gekkode.com/nl/tarifs/">Voir les tarifs</a>

De native button reageert op Enter en Spatie, krijgt focus via het toetsenbord en kondigt zijn rol aan. Dat alles gaat verloren met een div.

Fout 7: links die “klik hier” zeggen

De tekst van een link moet op zichzelf zijn bestemming aankondigen: schermlezers bieden de lijst van links op de pagina los van hun context aan, en zoekmachines gebruiken de ankertekst om de doelpagina te kwalificeren.

Doe dit niet:

Pour nos tarifs, <a href="https://www.gekkode.com/nl/tarifs/">cliquez ici</a>.

Doe dit:

Consultez <a href="https://www.gekkode.com/nl/tarifs/">nos tarifs 2026</a>.

Fout 8: afbeeldingen zonder alt

Het attribuut alt beschrijft de afbeelding voor wie ze niet ziet: schermlezer, niet-geladen afbeelding, zoekmachine. Het is verplicht. Een puur decoratieve afbeelding krijgt een leeg alt, niet een ontbrekend.

Doe dit niet:

<img src="graphique-ventes.png">
<img src="separateur.png" alt="separateur.png">

Doe dit:

<img src="graphique-ventes.png" alt="Ventes trimestrielles 2026 : hausse de 12 % au T2">
<img src="separateur.png" alt=""> <!-- décorative : alt vide -->

De bestandsnaam is nooit een beschrijving. Beschrijf wat de afbeelding aan het verhaal toevoegt.

Fout 9: formuliervelden zonder label

Tekst die naast een veld staat, is er niet mee verbonden. De tag label, gekoppeld via for en id, kondigt het veld aan bij de schermlezer en maakt de tekst klikbaar om focus te geven.

Doe dit niet:

Adresse e-mail <input type="email" name="email">
<input type="text" placeholder="Votre nom">

Doe dit:

<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email" autocomplete="email">

<label for="nom">Votre nom</label>
<input id="nom" type="text" name="nom" autocomplete="name">

De placeholder vervangt het label niet: hij verdwijnt zodra je gaat typen en zijn contrast is vaak onvoldoende. Andere beste praktijken voor HTML-formulieren vullen dit aan.

Fout 10: inline styles en nagebootste lijsten

Twee slechte gewoontes die structuur en presentatie vermengen. Inline styling verhindert dat je het uiterlijk aanpast zonder de HTML aan te raken, een nagebootste lijst met streepjes en br is voor de browser geen lijst, hij kan ze niet aankondigen en niet tellen.

Doe dit niet:

<h1 style="font-size: 24px; color: #333;">Titre</h1>
<p>- Pommes<br>- Poires<br>- Cerises</p>

Doe dit:

<h1 class="titre-page">Titre</h1>
<ul>
  <li>Pommes</li>
  <li>Poires</li>
  <li>Cerises</li>
</ul>

.titre-page {
  font-size: 1.5rem;
  color: #333;
}

Je HTML controleren

Drie snelle controles, in volgorde:

1. De validator van het W3C signaleert verkeerd gesloten tags, onbekende attributen en ontbrekende alt‘s.
2. Het tabblad Toegankelijkheid van de ontwikkelaarstools (Chrome, Firefox) toont de boom zoals een schermlezer hem waarneemt: verschijnen je header, nav en main daar als regio’s, dan klopt de structuur.
3. Navigatie met het toetsenbord: tab door de pagina. Alles wat klikbaar is, moet focus krijgen, in een logische volgorde. Een klikbare div faalt hier.

Voor de volledige lijst van structuur- en inhoudstags, zie 20 HTML5-tags om te kennen. En zodra de pagina gestructureerd is, neemt CSS het over, bijvoorbeeld om elementen te centreren zonder de HTML aan te raken.