Hoe werkt de H1-tag?
De HTML-standaard van de WHATWG kent zes kopelementen, h1 tot en met h6. Het cijfer geeft het niveau aan: h1 is voor de hoofdsectie, h2 voor een subsectie, h3 voor een sub-subsectie, enzovoort. Zo ontstaat een inhoudsopgave van de pagina:
<h1>Wandelschoenen voor dames</h1>
<h2>Waterdichte wandelschoenen</h2>
<h3>Lage modellen</h3>
<h3>Hoge modellen</h3>
<h2>Maattabel</h2>De standaard geeft twee regels voor die opbouw. Heeft een pagina koppen, dan hoort minstens één daarvan niveau 1 te hebben. En elke volgende kop gaat hooguit één niveau dieper: na een h1 komt een h2, geen h3. Terugspringen mag wel, bijvoorbeeld van een h4 naar een nieuwe h2.
Volgens het W3C kunnen browsers en hulpmiddelen zoals schermlezers koppen gebruiken om binnen een pagina te navigeren. Een overgeslagen niveau kan verwarrend zijn. Daarmee raakt de H1 ook aan toegankelijkheid en WCAG.
Mag je meer dan één H1 gebruiken?
De HTML-standaard verbiedt meerdere h1-elementen niet: een kop mag hetzelfde niveau hebben als de kop ervoor. Google geeft in zijn documentatie over titels in de zoekresultaten wel een advies. Maak duidelijk welke tekst de hoofdtitel is, bijvoorbeeld met een grotere letter of door de titel in het eerste zichtbare h1-element te zetten. Hebben meerdere koppen hetzelfde visuele gewicht, dan kan dat verwarrend zijn.
Google kijkt voor die titel naar meerdere bronnen. Naast de title tag noemt Google onder meer de belangrijkste zichtbare titel, kopelementen zoals de h1, de og:title-tag en ankerteksten van links naar de pagina.
Voorbeeld: het logo als H1
Een keukenzaak uit Ede gebruikt een thema dat op elke pagina het logo in een h1 zet. Daardoor heeft elke pagina dezelfde H1: de naam van de zaak. De echte paginatitel, zoals ‘Inbouwapparatuur’, staat in een h2.
De zaak past het thema aan. Het logo wordt een gewone link naar de homepage, en het onderwerp van elke pagina krijgt de h1. Het W3C laat in zijn uitleg over koppen precies die opbouw zien: niet de sitenaam, maar de kop van de inhoud krijgt niveau 1.
Voor: <h1>Keukenhuis Veluwe</h1> ... <h2>Inbouwapparatuur</h2>
Na: <a href="/">Keukenhuis Veluwe</a> ... <h1>Inbouwapparatuur</h1>Verwar de H1-tag niet met
- Title tag: staat in de head van de pagina en verschijnt in het tabblad van de browser. De H1 is de zichtbare kop op de pagina zelf.
- Grote letters: een grote, vette tekst is nog geen kop. Alleen de elementen h1 tot en met h6, of een element met
role="heading", maken voor hulpmiddelen een kop.
Veelgestelde vragen over H1-tag
Wat is een H1?
De H1 is de belangrijkste kop van een webpagina. In de code is het het h1-element. Meestal staat het onderwerp van de pagina erin, bovenaan en in de grootste letter.
Hoeveel H1-tags mag een pagina hebben?
Volgens de HTML-standaard mag een pagina meer dan één H1 hebben. Google raadt wel aan om duidelijk te maken welke tekst de hoofdtitel is. Eén zichtbare H1 met het onderwerp van de pagina is daarom het helderst.
Moet de H1 hetzelfde zijn als de title tag?
Nee, ze mogen wel op elkaar lijken. De title tag staat in de head en verschijnt in het tabblad. De H1 is de zichtbare kop. Google gebruikt beide als bron voor de titel in de zoekresultaten.