H3 tag: wat het is, hoe je het gebruikt en best practices voor SEO

Een H3 tag is een kop op het derde niveau in HTML. Je gebruikt die om een onderdeel binnen een grotere sectie verder op te delen, meestal onder een H2. Dat helpt bezoekers sneller scannen, maakt de opbouw duidelijker voor zoekmachines en verbetert de toegankelijkheid voor screenreaders. Gebruik een H3 dus voor structuur en betekenis, niet alleen voor opmaak. Hieronder zie je wanneer je die inzet, hoe je dat goed doet en welke fouten je voorkomt.

• Een H3 gebruik je als subkop binnen een sectie die al onder een H2 valt.
• De waarde voor SEO is vooral indirect via betere structuur, leesbaarheid en context.
• Voor toegankelijkheid is een logische volgorde van koppen essentieel.
• Gebruik headings voor semantiek en CSS voor vormgeving.
• In WordPress, builders en Markdown blijft dezelfde hiërarchie gelden.

Wat is de H3 tag?

Definitie en semantische rol

Een H3 tag is een headingelement in HTML dat een subsectie aanduidt binnen een groter onderdeel van de pagina. In de hiërarchie van HTML headings staat dit niveau onder de H2 en boven de H4. De functie is dus niet alleen visueel. De kop vertelt ook iets over de relatie tussen onderwerpen op de pagina.

Zie het zo: de H1 is het hoofdonderwerp, de H2 verdeelt dat onderwerp in hoofdsecties en de H3 splitst zo’n sectie weer op in kleinere, logische delen. Die semantiek helpt zoekmachines de context van je content beter te begrijpen en maakt de pagina prettiger voor bezoekers die snel willen scannen.

Voorbeeld in basis HTML

Een eenvoudig voorbeeld van een kop op niveau 3 ziet er zo uit:

<h3>Belangrijkste voordelen</h3>

In een volledige structuur ziet dat er bijvoorbeeld zo uit:

<h1>SEO gids voor beginners</h1>
<h2>On-page optimalisatie</h2>
<h3>Titels verbeteren</h3>
<h3>Interne links toevoegen</h3>

H3 versus andere headingniveaus

Wanneer gebruik je welke kop?

Een duidelijke headingstructuur voorkomt verwarring. In de praktijk werkt deze indeling het best:

• H1: de hoofdtitel van de pagina
• H2: de belangrijkste onderdelen van het onderwerp
• H3: subonderdelen binnen een H2-sectie
• H4: alleen gebruiken als je binnen een H3 nog een extra laag nodig hebt

Wie zoekt naar het verschil tussen een kop op niveau 2 en niveau 3, zoekt meestal naar hiërarchie. Het antwoord is simpel: een H2 start een hoofdonderdeel, terwijl een H3 een subonderdeel binnen dat hoofdonderdeel is.

Richtlijnen voor een logische hiërarchie

Bouw je pagina op van algemeen naar specifiek. Begin met één duidelijke H1, verdeel de inhoud daarna in herkenbare H2-secties en gebruik pas een H3 als je binnen zo’n sectie meerdere subonderwerpen hebt. Overslaan kan technisch soms, maar in gewone content is een logische volgorde bijna altijd het duidelijkst.

Headingniveau	Functie	Gebruik
H1	Hoofdonderwerp	Één keer per pagina als paginatitel
H2	Belangrijke sectie	Voor de hoofdonderdelen van het artikel
H3	Subsectie	Voor onderdelen binnen een H2-sectie
H4	Extra verdieping	Alleen als een H3 verder opgesplitst moet worden

SEO en de H3 tag

Heeft dit headingniveau invloed op ranking?

Ja, maar niet als losstaand rankingtrucje. Een kop op het derde niveau zorgt niet direct voor hogere posities alleen doordat je die gebruikt. De winst zit vooral in een betere contentstructuur. Zoekmachines kunnen daardoor sneller zien welke subonderwerpen bij elkaar horen en gebruikers vinden informatie makkelijker terug.

Dat betekent ook dat een nette opbouw kan bijdragen aan signalen die wél belangrijk zijn, zoals gebruikservaring, duidelijkheid en relevantie van de pagina. Vooral op uitgebreide artikelen helpt een sterke structuur om beter aan te sluiten op zoekintentie en om kansrijker te worden voor korte antwoorden in zoekresultaten.

Wanneer verwerk je zoektermen in een subkop?

Gebruik relevante termen alleen als ze natuurlijk passen bij de inhoud van de sectie. Een subkop moet in de eerste plaats duidelijk zijn voor de lezer. Als je een belangrijke variant van je hoofdonderwerp logisch kunt verwerken, is dat prima. Forceer het niet. Natuurlijke taal leest beter en sluit ook beter aan op moderne zoeksystemen die context begrijpen.

Een duidelijke koppenstructuur werkt het best in combinatie met een bredere aanpak van zoekmachine optimalisatie. Wil je content beter laten aansluiten op wat mensen écht zoeken, lees dan ook meer over zoekintentie.

Toegankelijkheid en documentopbouw

Hoe screenreaders headings interpreteren

Voor veel gebruikers van screenreaders zijn headings een soort navigatiemenu binnen de pagina. Zij springen van kop naar kop om snel te begrijpen waar een onderdeel over gaat. Als de hiërarchie rommelig is, bijvoorbeeld doordat je een niveau overslaat zonder duidelijke reden, wordt die navigatie minder prettig en soms verwarrend.

Een goede documentopbouw helpt dus niet alleen zoekmachines, maar ook echte gebruikers. Dat maakt dit onderwerp direct relevant voor toegankelijkheid en gebruiksvriendelijkheid.

ARIA en native HTML

Gebruik in gewone content bij voorkeur echte HTML-headings. Native elementen zijn duidelijker, eenvoudiger en betrouwbaarder dan nagebootste koppen met ARIA-attributen. Alleen in uitzonderlijke situaties, bijvoorbeeld in complexe webapplicaties, kan een alternatief nodig zijn.

Goed voorbeeld:

<h3>Belangrijke specificaties</h3>

Minder goed voorbeeld:

<div role="heading" aria-level="3">Belangrijke specificaties</div>

Meer achtergrond over headings en toegankelijkheid vind je onder andere bij MDN Web Docs en WebAIM.

Implementatie in CMS en builders

WordPress met Gutenberg

In Gutenberg voeg je een kopblok toe en kies je daarna het juiste niveau in de blokinstellingen. Het is belangrijk dat je niet alleen de tekst groter maakt, maar echt het goede headingniveau selecteert. Anders klopt de visuele opmaak misschien wel, maar de semantiek van de pagina niet.

1. Voeg een nieuw kopblok toe.
2. Kies in de toolbar of zijbalk het juiste niveau.
3. Controleer in de lijstweergave of de structuur logisch blijft.

Elementor en andere page builders

In builders kies je vaak bij een headingwidget ook een HTML-tag. Laat je daarbij niet alleen leiden door design. Een mooie vormgeving is geen reden om automatisch voor niveau 3 te kiezen. Bepaal eerst of de kop echt een subonderdeel is binnen een groter blok.

Markdown en andere editors

Werk je in Markdown, dan maak je een heading van dit niveau met drie hekjes:

### Belangrijkste voordelen

Ook daar blijft de logica hetzelfde: eerst de hoofdonderdelen, daarna de subonderdelen.

Werk je aan een WordPress-site, neem headings dan meteen mee in een bredere controle van technische SEO.

Styling en responsive gedrag

Behoud semantiek en stijl apart

De betekenis van een heading en de vormgeving ervan zijn twee verschillende dingen. Gebruik de HTML-kop voor structuur en CSS voor design. Zo houd je de pagina semantisch sterk en visueel consistent.

Basis CSS-voorbeeld

h3 {
  font-size: 1.5rem;
  margin-top: 24px;
  margin-bottom: 12px;
  line-height: 1.3;
}

Responsive leesbaarheid

Zorg dat subkoppen ook op mobiel goed leesbaar blijven. Let op voldoende witruimte, een prettig regelverloop en een schaal die past bij de rest van de pagina. Grote verschillen tussen desktop en mobiel maken een structuur vaak onrustig.

Leesbaarheid en UX hangen ook samen met prestaties. Daarom is het slim om headings mee te nemen in een bredere check van Core Web Vitals.

Veelgemaakte fouten en hoe je ze voorkomt

Een heading gebruiken voor styling

Een veelgemaakte fout is een kop van niveau 3 kiezen omdat die visueel mooi uitkomt. Dat is onhandig, omdat je dan structuur en design door elkaar haalt. Kies eerst het juiste niveau en pas daarna de opmaak aan met CSS.

Opspringende niveaus in de structuur

Rechtstreeks van de hoofdtitel naar een lager niveau springen maakt een pagina vaak minder logisch. In informatieve content werkt een volgorde van groot naar klein meestal het best. Dat helpt zowel bezoekers als zoekmachines.

Te veel subkoppen plaatsen

Niet elk blokje tekst heeft een aparte kop nodig. Gebruik een extra subkop alleen als je echt een nieuw onderdeel introduceert. Te veel koppen maken een pagina juist onrustig.

Vage of generieke koppen schrijven

Koppen zoals “Overig”, “Meer info” of “Extra” zeggen weinig. Beschrijvende subkoppen maken direct duidelijk wat de lezer kan verwachten. Dat verhoogt de scanbaarheid en helpt bij featured snippets en AI-gegenereerde samenvattingen.

Praktische voorbeelden en code snippets

Voorbeeld 1: blogartikel met duidelijke substructuur

<h1>Contentmarketing voor beginners</h1>
<h2>Waarom contentmarketing werkt</h2>
<h3>Meer zichtbaarheid in Google</h3>
<h3>Meer vertrouwen bij je doelgroep</h3>
<h2>Hoe je start met een plan</h2>
<h3>Doelen bepalen</h3>
<h3>Onderwerpen kiezen</h3>

Voorbeeld 2: FAQ-pagina

<h1>Veelgestelde vragen over webshops</h1>
<h2>Betalen en verzending</h2>
<h3>Welke betaalmethoden kun je aanbieden?</h3>
<h3>Hoe bereken je verzendkosten?</h3>

Op FAQ-pagina’s kan deze opbouw helpen om vragen en antwoorden overzichtelijk te groeperen. Voeg daar eventueel gestructureerde data aan toe als de inhoud daar geschikt voor is.

Voorbeeld 3: longread met inhoudsopgave en anchor links

Bij lange artikelen kun je een inhoudsopgave toevoegen die verwijst naar subsecties. Dat maakt de pagina gebruiksvriendelijker en kan de betrokkenheid verhogen.

<h2>Technische controle</h2>
<h3 id="indexeerbaarheid">Indexeerbaarheid controleren</h3>
<h3 id="canonicals">Canonical tags nalopen</h3>
<h3 id="redirects">Redirects testen</h3>

Wil je structuur en inhoud beter op elkaar afstemmen, lees dan ook onze gids over content marketing en onze uitleg over content clusters.

Goede en slechte headingstructuren

Goed voorbeeld

<h1>Handleiding voor e-mailmarketing</h1>
<h2>Waarom e-mailmarketing werkt</h2>
<h3>Lage kosten</h3>
<h3>Hoge relevantie</h3>
<h2>Campagnes opzetten</h2>
<h3>Doelgroep segmenteren</h3>
<h3>Automatiseringen instellen</h3>

Minder goed voorbeeld

<h1>Handleiding voor e-mailmarketing</h1>
<h3>Waarom e-mailmarketing werkt</h3>
<h2>Lage kosten</h2>
<h4>Doelgroep segmenteren</h4>

In het tweede voorbeeld klopt de hiërarchie niet. Dat maakt de inhoud minder logisch en verlaagt de scanbaarheid.

Checklist: H3 gebruiken in 10 stappen

Gebruik deze snelscan voor elke pagina:

• Controleer of de kop echt binnen een H2-sectie valt.
• Gebruik dit niveau alleen voor een apart subonderwerp.
• Schrijf kort en duidelijk waar de sectie over gaat.
• Verwerk relevante termen alleen als dat natuurlijk leest.
• Gebruik headings niet voor puur visuele opmaak.
• Houd de volgorde van koppen logisch en consistent.
• Zorg dat de tekst onder de kop direct aansluit op de belofte van de kop.
• Controleer de leesbaarheid op mobiel.
• Test in je CMS of het juiste niveau echt in de HTML wordt opgeslagen.
• Bekijk de pagina ook met focus op toegankelijkheid en scanbaarheid.

FAQ

Conclusie en aanbevelingen

Quick wins

Een H3 tag gebruik je om een sectie logisch op te splitsen binnen een groter onderdeel van de pagina. Dat helpt bij leesbaarheid, semantiek, toegankelijkheid en indirect ook bij SEO. De grootste winst zit niet in het element zelf, maar in de duidelijke structuur die je ermee creëert.

Praktisch advies voor je volgende pagina

Denk altijd eerst in inhoudelijke hiërarchie en pas daarna in design. Scan een bestaande pagina eens alleen op de koppen. Begrijp je direct hoe de inhoud is opgebouwd, dan zit je meestal goed. Zie je rommelige sprongen of vage subkoppen, dan is dat een snelle optimalisatiekans.

Wil je je content verder verbeteren, combineer een sterke headingstructuur dan met slim interne linken, een logische URL structuur en een goede basis in SEO voor beginners.

Bronnen: MDN Web Docs, WHATWG HTML specificatie, Google Search Central, The A11Y Project.