Correct gebruik van de kopjes H1-H6

We lezen teksten vanaf een scherm anders dan vanaf papier.

Het lezen gebeurt meer scannend dan lineair.

Want 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.

Daarom is het gebruik van zogenaamde ankers in een webtekst handig.

Deze ankers geven 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.

Hou bij toepassing ervan 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>

Dus 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”.

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 er dan ook voor zorgen dat de positie in de zoekresultaten verbetert.

  •  
  •  
  •  
  •  
  •  
  •  
  •  

Partners

Read more about our partners