Correct gebruik van de kopjes H1-H6

Wij lezen teksten vanaf een scherm anders dan vanaf papier. Het lezen gebeurt meer scannend dan lineair. Als we websites bezoeken dan zijn we op zoek naar informatie. We gaan niet rustig zitten om teksten van begin tot eind te lezen zoals we zouden doen met een goed boek. Om dit leesgedrag te accommoderen is het gebruik van zogenaamde ankers in een webtekst cruciaal.

Deze ankers geeft ons het houvast om snel verschillende informatie-eenheden te identificeren en zo sneller een keus te maken wat we wel en niet willen lezen.

Het gebruik van kopjes boven de tekst, is een goede manier om deze ankers te plaatsen. Maar hoe doe je dat?

Goed gebruik van kopjes

Uit usability onderzoek blijkt dat wij de informatie in een kopje gebruiken om te bepalen waar de tekst eronder over gaat. Het is daarom belangrijk om het gebruik van kopjes goed toe te passen. Houd hiervoor rekening met:

• Kopjes worden in HTML weergegeven met de elementen <H1> tot en met <H6>
• De belangrijkste kop is <H1>, de minst belangrijke <H6>
• Een webtekst heeft slechts 1 <H1> element
• Meerdere <H2> tot en met <H6> zijn mogelijk
• Maak kopje beschrijvend voor tekst waar hij boven staat

De informatiestructuur van je webtekst is in principe als volgt:

<H1>Mijn Vakantie</H1>
<p>Hier staat tekst</p>
<H2>De Reis</H2>
<p>Hier staat tekst</p>
<H3>De Vlucht</H3>
<p>Hier staat tekst</p>
<H2>De Bestemming</H2>
<p>Hier staat tekst</p>

Wat hier staat is het volgende: De pagina gaat over “Mijn Vakantie”. Binnen “Mijn Vakantie” maak ik onderscheid tussen twee zaken, namelijk “De Reis” en “De Bestemming”. Binnen “De Reis” heb ik ook nog een informatieblok “De Vlucht”. Schematisch ziet dit er als volgt uit:

Voor de webpagina die je nu aan het lezen bent is de <H1> “Correct gebruik van…”. Daaronder staan drie <H2> elementen voor het goed en het verkeerd gebruik van kopjes en zoekmachines en kopjes.

Verkeerd gebruik van kopjes

Veel gemaakte fouten bij het toepassen van kopjes zijn:

• Gebruik van meerdere <H1> in een webtekst. Er kan maar 1 onderwerp het belangrijkste zijn op een pagina. Deze krijgt de <H1>.
• Een <H2> wordt als <H1> gebruikt. Vaak gebeurt dit omdat de H2 kleiner is (in standaard opmaak). Echter door het toepassen van CSS kan een <H1> elke opmaak krijgen die gewenst is.
• Het kan ook voorkomen dat er wel een <H1> wordt gebruikt, geen <H2> en wel een <H3>. Dit zou hetzelfde zijn wanneer er bij tennis wel sets maar geen games worden geteld en wel weer de punten binnen een game. Houd de hiërarchische structuur compleet.

Zoekmachine en kopjes

Zoekmachines willen relevante zoekresultaten geven aan hun gebruikers. Om deze te kunnen geven, gaan zoekmachines op zoek naar het onderwerp van een pagina. Hierbij geven ze veel gewicht aan woorden die in kopjes staan. Immers, deze geven aan waar de tekst eronder over gaat. Het correct toepassen van de kopjes kan ervoor zorgen dat de positie in de zoekresultaten verbeterd.