Semantische HTML: zo maak je je pagina's leesbaar voor AI

Semantische HTML gebruikt voor elke inhoud de tag die zegt wat het is.

Zo kan een crawler de betekenis van je pagina aflezen in plaats van te raden. Precies dat hebben AI-modellen zoals ChatGPT, Google AI Overviews en Perplexity nodig om je te begrijpen en te citeren.

Het verdict: semantische HTML voor AI is geen apart trucje, maar goed bouwwerk. Een nette koppenstructuur, echte lijsten en echte tabellen maken je content extraheerbaar, toegankelijker en beter vindbaar.

Wil je dat AI je pagina’s citeert? Dan moet je content niet alleen mooi ogen voor mensen, maar ook helder gestructureerd zijn voor machines.

Hieronder: wat semantische HTML is, waarom AI je code leest en niet je vormgeving, en welke keuzes het verschil maken.

Wat is semantische HTML precies?

HTML waarbij elke tag beschrijft wat de inhoud betekent, niet hoe die eruitziet.

Tags die betekenis dragen

Drie voorbeelden:

• <h2>: “dit is een sectiekop”
• <ul>: “dit is een lijst”
• <table>: “dit zijn gegevens in rijen en kolommen”

Die betekenis is precies wat een machine nodig heeft om je pagina te begrijpen.

MDN zegt het scherp: HTML hoort de data te beschrijven, niet de standaardopmaak. Opmaak is de taak van CSS (MDN over semantiek).

Volgens MDN zijn er ongeveer 100 semantische elementen, van <article> en <nav> tot <main> en <section>.

Het tegenovergestelde: markup die alleen op uiterlijk stuurt

Denk aan een titel die in werkelijkheid een gewone <div> is met een groot, vet lettertype.

Of een “lijst” die bestaat uit losse regels met streepjes ervoor.

Voor een mens ziet dat er identiek uit. Voor een machine is het verschil enorm:

De eerste variant laat alles als een ongedifferentieerde brok tekst achter. De tweede zegt expliciet wat de rol van elk stuk is.

Kern: semantische HTML maakt de structuur die jij visueel bedoelt ook letterlijk leesbaar in de code.

Waarom leest AI je HTML en niet je opmaak?

Omdat AI-modellen en hun crawlers op de ruwe HTML werken, niet op het beeld in je browser.

Kleuren, lettergroottes en posities uit CSS zijn voor een extractieproces grotendeels ruis.

Wat telt, is de boomstructuur van tags eronder.

Hoe een AI je pagina opdeelt

Een AI probeert je inhoud op te delen in betekenisvolle stukken:

• Wat is de hoofdtitel?
• Welke vragen behandelt de pagina?
• Welk antwoord hoort bij welke kop?
• Wat zijn opsommingen en wat zijn data?

Staat dat in semantische tags, dan haalt het model die stukken er rechtstreeks uit.

Heb je het visueel nagebootst met styling? Dan moet het model gokken op basis van patronen, en gokken levert fouten op.

Twee identieke pagina’s, twee resultaten

Daarom kunnen twee pagina’s die er voor een mens identiek uitzien, totaal verschillend presteren in AI-antwoorden.

De ene levert afgebakende, citeerbare brokken aan. De andere levert een muur tekst waar het model zelf structuur in moet brengen.

Eerst moet de crawler er wel bij kunnen

Semantiek helpt alleen als de crawler je HTML ook krijgt.

Twee voorwaarden:

1. Toegang: je robots.txt blokkeert AI-crawlers niet.
2. Tekst in de HTML: je inhoud staat in de geleverde HTML, niet pas na JavaScript.

Zo ziet een robots.txt eruit die alle crawlers toelaat:

De robots.txt van customerimpact.be, oktober 2026: één regel die alle crawlers toelaat, plus de sitemap.

Meer daarover in AI-crawlers toelaten en optimaliseren en in waarom client-side rendering onzichtbaar is voor AI.

Hoe maak je content machine-extraheerbaar?

Met een logische koppenstructuur, en met echte lijsten en tabellen waar dat past.

Vijf keuzes maken het meeste verschil.

1. Gebruik één heldere koppenhiërarchie

Eén <h1> met het hoofdonderwerp, daaronder <h2>’s voor de deelvragen, en <h3> voor onderdelen binnen een sectie.

Sla geen niveaus over. Het W3C raadt dat expliciet af.

Kies je kopniveau op basis van betekenis, niet op basis van hoe groot je de tekst wil.

Een nette hiërarchie is letterlijk een inhoudsopgave die de machine kan volgen. Zie ook koppenstructuur voor SEO.

2. Formuleer je koppen als de vraag die iemand stelt

Een kop als “Wat kost een B2B-website?” is voor een AI veel bruikbaarder dan “Investering”.

De kop matcht dan al met een echte vraag.

Laat onder elke kop direct een kort, volledig antwoord volgen voordat je uitweidt. Zo wordt elke sectie een op zichzelf staand, citeerbaar blok.

3. Zet opsommingen in echte lijsten

Een reeks punten hoort in een <ul> of <ol>.

Niet in losse alinea’s met streepjes, en niet in een tabel die als lijst is misbruikt.

Een echte lijst vertelt de machine expliciet: dit zijn losse, gelijkwaardige items. Dat soort inhoud komt in AI-antwoorden vaak als bullet terug.

4. Gebruik tabellen alleen voor echte data

Vergelijk je opties, prijzen of specificaties? Gebruik dan een <table> met nette kopcellen.

Een tabel met heldere rij- en kolomkoppen is een van de makkelijkst te extraheren datavormen die er bestaan.

Let op: misbruik tabellen niet voor lay-out. Dan geef je de machine een verkeerd signaal over wat de inhoud betekent.

5. Markeer overige rollen met de juiste elementen

Elke rol heeft zijn eigen element:

Hoe meer rollen je expliciet maakt, hoe minder een machine hoeft te interpreteren.

Wat alle vijf gemeen hebben

Je vertelt de machine telkens wat iets ís, in plaats van het te laten afleiden uit hoe het eruitziet.

Hoe je lange pagina’s in zelfstandige blokken opdeelt, lees je in content chunking voor AI-zoekmachines.

Het bredere technische kader staat in onze complete gids over een B2B-website laten maken.

Hoe verhoudt semantische HTML zich tot schema-markup?

Ze vullen elkaar aan: de eerste structureert je zichtbare content, de tweede voegt expliciete betekenis toe.

Twee lagen, twee taken

Semantische tags vertellen een machine dat iets een kop, een lijst of een tabel is.

Schema-markup, ofwel gestructureerde data, vertelt daarbovenop dat een blok bijvoorbeeld een veelgestelde vraag, een product of een organisatie beschrijft.

Zo ziet gedetecteerde schema eruit in de Schema Markup Validator:

De Schema Markup Validator op onze eigen Engelse homepage, oktober 2026. Elk type moet kloppen met wat de pagina zichtbaar zegt.

Eerst de basis, dan de afwerking

Je hebt ze allebei nodig, maar in de juiste volgorde.

Schema-markup op een pagina met rommelige HTML is een laagje vernis op een wankele basis.

Begin daarom met schone, semantische opbouw. Voeg gestructureerde data toe waar die echt iets toevoegt.

Hoe die extra laag werkt, lees je in onze uitleg over schema-markup en gestructureerde data. Fouten opsporen doe je met schema-markup valideren.

Wat Google zelf zegt over AI-functies

Google is opvallend nuchter over AI Overviews en AI Mode (Google Search Central over AI-functies):

• Er zijn geen extra technische vereisten om erin te verschijnen.
• Er is geen speciale schema.org-markup nodig.
• Je hebt geen nieuwe AI-tekstbestanden of machineleesbare bestanden nodig.

Wel raadt Google aan om belangrijke content in tekstvorm beschikbaar te maken. En je gestructureerde data moet kloppen met de zichtbare tekst.

Conclusie: schone, tekstuele HTML is de basis. Er bestaat geen geheime AI-tag.

Is dit alleen voor AI, of ook voor je gewone bezoekers?

Ook voor je bezoekers: wat je content leesbaar maakt voor AI, maakt die tegelijk toegankelijker en beter vindbaar.

Het is geen apart AI-trucje, maar degelijk vakwerk dat op meerdere fronten loont.

Toegankelijkheid: direct effect

Schermlezers leunen op semantische tags om een pagina voor te lezen en navigeerbaar te maken. MDN noemt koppen een wegwijzer voor slechtziende gebruikers.

Een gebruiker die op koppen door je pagina springt, kan dat alleen als je koppen ook echte koppen zijn.

Slordige markup sluit een deel van je bezoekers uit. Dat is een van de fouten in ons stuk over veelgemaakte toegankelijkheidsfouten.

Wil je verder gaan? Lees je website toegankelijk maken of bekijk onze dienst digitale toegankelijkheid.

Klassieke SEO: reëel, maar kleiner dan beweerd

De SEO-starterhandleiding van Google raadt koppen aan om gebruikers te helpen navigeren.

Maar ze zegt ook dat de volgorde van koppen voor Google Zoeken niet uitmaakt.

Verwacht dus geen rankingboost van tags alleen.

Je bezoekers vinden sneller wat ze zoeken

Een heldere koppenstructuur zorgt ervoor dat bezoekers sneller vinden wat ze zoeken. Dat helpt rechtstreeks om van bezoekers leads te maken.

Bij Customer Impact bouwen we daarom platform-onafhankelijk op een schone, semantische basis.

Of je site nu in Webflow, WordPress of headless draait: de keuze van platform verandert dit principe niet.

Veelgestelde vragen

Helpt semantische HTML om geciteerd te worden door AI?

Het maakt je content makkelijker te extraheren in afgebakende blokken. Of een AI je citeert, hangt daarnaast af van je inhoud, je autoriteit en of de crawler je pagina kan lezen.

Heb ik schema-markup nodig voor AI Overviews?

Nee. Google zegt dat er geen speciale schema.org-markup nodig is. Gestructureerde data blijft nuttig, maar moet kloppen met de zichtbare tekst.

Mag ik meerdere h1-koppen gebruiken?

Gebruik één <h1> voor het hoofdonderwerp. Dat geeft machines en schermlezers één duidelijk startpunt.

Is een div met een grote letter hetzelfde als een kop?

Nee. Volgens MDN ziet een gestylede <span> eruit als een kop, maar heeft hij geen semantische waarde en dus geen van de voordelen.

De korte samenvatting

Semantische HTML gebruikt de juiste tag voor de juiste inhoud, zodat een machine je structuur rechtstreeks kan aflezen.

AI leest die code, niet je vormgeving. Koppen, echte lijsten en echte tabellen maken je content extraheerbaar.

Schema-markup bouwt daar bovenop, maar vervangt nooit een slordige basis.

Beslisregel: eerst schone HTML, dan schema, dan pas extra AI-maatregelen.

Wil je dat onze webdesigner je pagina’s op een schone, machine-leesbare basis zet die leads oplevert? Of wil je weten hoe zichtbaar je bent in AI-antwoorden via ons GEO-bureau?

Neem contact op en we bekijken samen waar jouw site structuur laat liggen.