Semantische HTML: de taal die mens, machine en AI begrijpen

Het div-soep-probleem

Ik open de broncode van een nieuwe klant. En dan zie ik dit:

• div.wrapper > div.container > div.row > div.col-12 > div.content > div.text > div.paragraph
• Geen enkele semantische tag in zicht.
• Zeven lagen div-nesting voor een simpele alinea.

Div-soep. En ik weet meteen: hier gaan we het over hebben.

Kijk, dit is niet alleen lelijk. Het is actief schadelijk voor hoe AI-modellen jouw website begrijpen. Een taalmodel heeft geen ogen. Geen intuïtie voor visuele hiërarchie. Het leest de structuur van je HTML en probeert daaruit af te leiden wat belangrijk is en wat niet. Wat navigatie is en wat content. Wat een citaat is en wat een bijschrift.

Als die structuur er niet is? Dan gokt het. En gokken leidt tot foutieve interpretaties, gemiste context en uiteindelijk: minder citaties voor jou.

Maar wacht. Is dat eigenlijk wel zo erg? Ja. Ja, dat is het.

Zes elementen die het verschil maken

HTML5 introduceerde semantische elementen die structuur communiceren. Zonder CSS-klassen, zonder ARIA-attributen. Ze bestaan al meer dan tien jaar. En toch: de meerderheid van de websites gebruikt ze niet. Of verkeerd.

Even een rondje langs de belangrijkste:

• main: de primaire content van de pagina. Eén per pagina. AI-modellen gebruiken dit om te bepalen wat kern-content is en wat ruis.
• article: een zelfstandig stuk content dat los van context waarde heeft. Een blogpost, een nieuwsartikel. Dit element zegt tegen AI: dit is citeerbaar.
• section: een thematische groepering binnen een article of pagina. Helpt AI-modellen de opbouw van langere stukken te snappen.
• aside: supplementaire content. Sidebar, contextblok, definitiebox. Gerelateerd maar niet essentieel.
• nav: navigatie. AI-modellen herkennen dit en verwerken het anders dan body-content.
• header en footer: koptekst en voettekst. Helpen AI-modellen terugkerende elementen te onderscheiden van unieke content.

Dat is het. Zes elementen. Het is geen raketwetenschap. Het is discipline.

De praktische implementatie

Ik hoor je denken: leuk verhaal Reinier, maar ik ga mijn hele website niet herbouwen. Dat hoeft ook niet.

Semantische HTML implementeren is geen grote refactoring. Je vervangt een handvol div-elementen door hun semantische equivalent. De CSS hoeft amper te veranderen, want semantische elementen zijn gewone block-elementen, net als div.

1. Identificeer de hoofdcontent en wrap die in een main-element. Eén main per pagina.
2. Wrap zelfstandige content-stukken (blogposts, artikelen) in article-elementen.
3. Vervang div.nav of div.menu door nav.
4. Vervang div.header door header en div.footer door footer.
5. Gebruik section voor logische blokken binnen een article. Geef elke section een heading.
6. Gebruik aside voor sidebar-content en gerelateerde links die niet tot de hoofdcontent behoren.

Bij Kobalt voer ik deze wijzigingen als eerste stap uit. Het kost een middag voor een gemiddelde website en het effect op AI-leesbaarheid is direct meetbaar. Soms vraag ik me af waarom niet iedereen dit doet. En dan herinner ik me: omdat niemand het uitlegt.

Verder dan de basis

Semantische HTML is de basis. Maar er is meer.

Lang="nl" op het html-element vertelt AI-modellen in welke taal je content is geschreven. Cruciaal voor meertalige websites. ARIA-role-attributen bieden extra context voor elementen die geen native semantisch equivalent hebben.

Het is als een ecosysteem: alles hangt samen. De semantische HTML is de bodem. Structured data is de begroeiing. ARIA is het microklimaat. Samen maken ze je website leesbaar voor alles en iedereen.

Veelgestelde vragen

Semantische HTML is niet de laatste stap in je AI-optimalisatie. Het is de eerste. Zonder goede structuur zijn alle andere verbeteringen halfwerk.