Skyline Groningen
Toegevoegd op

Het gebruik van headers (koppen)

Het is belangrijk om koppen te gebruiken op een webpagina om de documentstructuur weer te geven.

Structuur

Door webpagina's met koppen te organiseren, krijgen gebruikers een idee van de organisatie en structuur van de pagina. Visueel worden koppen weergegeven als groter en duidelijker dan de omringende tekst. Door teksten groter te maken, kan het oog door de pagina worden geleid. Het gebruik van koppen en ze visueel duidelijk maken is vooral handig voor gebruikers met cognitieve beperkingen.

Als de onderliggende code voor de koppen van een pagina correct is, kunnen gebruikers van schermlezers ook profiteren van koppen. Gebruikers van schermlezers kunnen op een pagina navigeren op basis van de koppen, naar een lijst met alle koppen luisteren en naar een gewenste kop gaan om op dat punt te beginnen met lezen. Gebruikers van schermlezers kunnen koppen gebruiken om de herhaalde blokken met inhoud over te slaan, zoals koppen, menu's en zijbalken

SEO

De zes koptags vormen een belangrijk onderdeel van het schrijven van HTML-inhoud. Naast de beschreven structuur hebben de koptags ook SEO-waarde.

Google beoordelt de kwaliteit van een pagina door naar de pagina te kijken, en probeert ook te achterhalen waar de pagina over gaat. Een van de (vele) dingen die Google en andere zoekmachines doen is het bepalen van de inhoud van een pagina door de woorden die in koptags verschijnen.

Hoe te gebruiken

Elke pagina kent minimaal en maximaal 1 <h1> -koptag, gevolgd door <h2> -koptags, dan de minder belangrijke <h3>, enzovoort.
Normaliter wordt de h1 gezet door het systeem en zal de webredacteur deze nooit hoeven in te stellen. Omdat er maar 1 mag zijn is het dus van belang de h1-kop nooit in de editor te gebruiken.

Alle andere koppen kunnen vaker voorkomen mits ze correct in de structuur worden gebruikt :

h1
  h2
  h2
  h2
    h3
    h3
  h2

 

Hoe niet te gebruiken

Het is niet toegestaan een lege kop in de tekst te zetten. Dit kan per ongeluk gebeuren na een enter.

Belangrijk: gebruik HTML-koppen alleen voor koppen. Gebruik geen koppen om tekst GROOT of vet te maken. Koppen zijn er niet voor de opmaak.

Tekst vet gedrukt weergeven betekent ergens de nadruk op leggen, dit zijn meestal maximaal 2 a 3 woorden.

 

Hulpmiddelen

Er zijn diverse plugins waarmee je kan controleren of de content de correcte koppen heeft, bijvoorbeeld voor Chrome :

headingsMap

Accessibility Insights for Web

bronnen : 
https://usability.yale.edu
https://www.w3schools.com