Semantische HTML: welke tags je gebruikt en waarom ze ertoe doen voor toegankelijkheid, Google en AI

Kort samengevat: semantische HTML betekent dat je tags gebruikt die beschrijven wat content is (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, geordende koppen, <figure>, <time>, <table>) in plaats van overal generieke <div> en <span>. Schermlezers kunnen dan navigeren via landmarks, Google herkent sneller de hoofdcontent van een pagina en AI-assistenten kunnen makkelijker een schone, op zichzelf staande passage overnemen. Het kost niets tijdens het bouwen en is achteraf moeilijk toe te voegen.

Een browser toont een <div> en een <nav> op dezelfde manier. Het verschil zit in de betekenis: semantische HTML vertelt elk programma dat de pagina leest welke rol elk blok speelt. MDN definieert het als het gebruiken van elementen volgens hun betekenis in plaats van hun standaarduiterlijk. Zoekmachines, hulptechnologieën en de crawlers die AI-modellen voeden, hebben allemaal baat bij die betekenis.

Wat zijn de belangrijkste semantische HTML-tags?

De HTML-standaard definieert tientallen elementen. Dit zijn de elementen die bijna elke contentpagina structureren:

Ook tags op tekstniveau dragen betekenis: <strong> voor belang, <em> voor nadruk, <blockquote> en <cite> voor citaten, <ul> en <ol> voor lijsten, <a> voor links en <button> voor acties.

Waarom is semantische HTML belangrijk voor toegankelijkheid?

Schermlezers bouwen een kaart van de pagina op basis van de tags. Dankzij de landmarks <header>, <nav>, <main>, <aside> en <footer> kan een gebruiker direct naar het menu of de content springen, en de lijst met koppen werkt als inhoudsopgave. De toegankelijkheidstutorials van het W3C over paginastructuur raden daarom deze gebieden en een logische volgorde van koppen aan.

Een klikbare <div> is onzichtbaar voor het toetsenbord en stil voor een schermlezer, tenzij je met de hand nabouwt wat een native <button> je gratis geeft. Native elementen komen met hun rol, toetsenbordfocus en verwacht gedrag. In veel landen is toegankelijkheid van openbare en commerciële websites bovendien een wettelijke eis, waardoor schone markup ook een kwestie van naleving is.

Helpt semantische HTML bij SEO?

Google heeft semantische tags nooit als directe rankingfactor gepresenteerd, en een pagina vol gewone <div> kan gewoon ranken. De waarde is indirect maar echt:

• Herkenning van de hoofdcontent: <main> en <article> helpen de tekst die ertoe doet te scheiden van menu's, zijbalken en footers die op elke pagina terugkomen.
• Onderwerpstructuur: een geordende koppenhiërarchie laat zien wat de pagina behandelt en hoe de delen zich tot elkaar verhouden, wat de relevantie voor long-tail zoekopdrachten ondersteunt.
• Beter begrip van elementen: echte tabellen, lijsten en datums zijn makkelijker te lezen dan visuele imitaties die met opgemaakte blokken zijn gebouwd.
• Samenhang met gestructureerde data: semantische markup en JSON-LD beschrijven dezelfde pagina vanuit twee hoeken. In ons artikel over gestructureerde content zie je hoe ze in elkaar passen.

Semantische HTML hoort bij technische SEO, net als nette URL's of snelle pagina's: een fundament waarmee je content correct gelezen kan worden.

Hoe gebruiken AI-assistenten de paginastructuur?

ChatGPT, Gemini, Perplexity en Google AI Overviews citeren geen hele pagina's: ze kiezen passages. De crawlers die je pagina ophalen, halen meestal de navigatie en standaardtekst eruit en knippen de tekst daarna in stukken. Een sectie die opent met een duidelijke <h2>, haar vraag in de eerste alinea beantwoordt en binnen één <section> blijft, levert een schoon stuk op. Dezelfde content, verspreid over geneste <div> en met koppen die met vetgedrukte tekst worden nagebootst, levert fragmenten op die vermengd zijn met menu-items. In onze gids over content chunking lees je hoe je secties schrijft die deze knip overleven.

Hoe ziet een goed gestructureerde artikelpagina eruit?

Hier is het skelet van een blogartikel, tag voor tag beschreven:

1. <header> bevat het logo en een <nav> met het hoofdmenu. Dit blok komt op elke pagina terug, dus crawlers leren het te negeren.

2. <main> opent direct daarna. Het bevat één enkel <article>, de content die je geïndexeerd en geciteerd wilt zien.

3. Binnen het <article> groepeert een <header> de <h1> (het paginaonderwerp), de naam van de auteur en een <time datetime="2026-10-18">-element met de publicatiedatum in een machineleesbaar formaat.

4. Elk deel van het artikel is een <section> die begint met een <h2> die is geformuleerd als de vraag die hij beantwoordt, gevolgd door <p>-alinea's, <ul>-lijsten of een <table> met <th>-koppen.

5. Een grafiek komt in een <figure> met een <img> met een beschrijvende alt-tekst en een <figcaption> die aangeeft wat de grafiek laat zien.

6. Gerelateerde links komen in een <aside>, buiten de hoofdstroom van het artikel.

7. Een <footer> sluit de pagina af met juridische links en contactgegevens.

Met dit skelet kan een gebruiker van een schermlezer met één toetsaanslag naar de content springen, ziet Google één hoofdartikel met een duidelijke opzet en kan een AI-crawler elke <section> als zelfstandig antwoord overnemen.

Wat zijn de meest gemaakte fouten in semantische HTML?

• Overal div: paginabouwers genereren vaak lagen <div> zonder landmarks. Controleer of er minstens een <main> bestaat die de content omsluit.
• Overgeslagen of verkeerd gebruikte koppen: van <h2> naar <h4> springen, koppen gebruiken om tekst groot te maken of vetgedrukte alinea's als nepkoppen gebruiken. Kies het niveau op basis van de structuur en geef het daarna met CSS een stijl.
• Meerdere concurrerende <h1>: HTML staat het toe, maar één enkele <h1> die het paginaonderwerp beschrijft, blijft het duidelijkste signaal voor gebruikers en zoekmachines.
• Klikbare <div> en <span>: gebruik <a> voor navigatie en <button> voor acties.
• Tabellen voor de lay-out en nepachtige tabellen: tabellen zijn voor gegevens; gegevens in opgemaakte blokken verliezen hun relaties tussen rijen en kolommen.
• Afbeeldingen van tekst: een kop of een prijs in een afbeelding kan niet worden gelezen door een crawler of een schermlezer.
• Datums alleen als gewone tekst: voeg <time> met een datetime-attribuut toe, zodat de datum ondubbelzinnig is.

Hoe controleer je de semantische structuur van een pagina?

Drie snelle controles dekken de meeste problemen. Geef eerst de kopstructuur van de pagina weer en lees die los: ze moet het verhaal van de content vertellen. Zoek daarna in de broncode naar <main>, <nav> en <article>. Navigeer ten slotte alleen met het toetsenbord over de pagina en kijk of elke link en knop bereikbaar is. Onze on-page SEO-audit toont problemen met koppen en markup voor elke URL, en de gratis Chrome-extensie van Sorank toont de kopstructuur van de pagina die je bekijkt.

Gebruik elke tag voor wat hij betekent: één <main>, één <h1>, geordende secties en echte tabellen geven mensen, Google en AI dezelfde duidelijke kaart van je pagina. Als de structuur schoon is, moet de content nog steeds regelmatig worden geschreven en gepubliceerd: Sorank schrijft en publiceert geoptimaliseerde artikelen voor Google en AI op autopilot.