Een H3 is een kop van het derde niveau, bedoeld om een sectie op te delen in kleinere, gerichtere stukken. In de code zit hij in een <h3>-tag en staat hij normaal onder een H2, zoals een subsectie onder een hoofdstuk valt.
Denk aan een receptpagina. De paginatitel is de H1 (‘Klassieke lasagne’), de H2’s zijn de grote fasen (‘Ingrediënten’, ‘Bereiding’) en de H3’s zijn de stappen binnen een fase (‘Maak de saus’, ‘Laag op en bak’). Die nesting vertelt zowel een lezer als een schermlezer precies hoe gedetailleerd het wordt. Het is gebouwd op dezelfde geordende HTML-kopniveaus die elke pagina zijn opbouw geven.
De regel die dit bruikbaar houdt, is volgorde. Een H3 hoort altijd onder een H2 te staan, nooit meteen na de H1, want niveaus overslaan breekt de logische boom waar hulptechnologie en zoekmachines op leunen.
Er is een grens die het weten waard is. Grijp je op een gewone marketingpagina naar H4, H5 of H6, dan is dat meestal een teken dat de content te diep genest is en een lezer de draad kwijtraakt. De meeste pagina’s blijven prima binnen H1 tot en met H3. Heeft een sectie echt zoveel detail nodig, dan leest het vaak beter om hem op te splitsen naar een aparte pagina, die dan zijn eigen heldere H1 krijgt in plaats van drie niveaus diep weggestopt te raken.
H3’s doen ook stil werk voor scanners. Onderzoek naar leesgedrag laat zien dat de meeste bezoekers een pagina in een F-vorm scannen en koppen veel vaker lezen dan de lopende tekst, dus een heldere H3 als ‘Wat het kost’ kan precies de regel zijn die iemand tegenhoudt om weg te klikken. Zet het belangrijkste woord vooraan, ‘Prijzen’ in plaats van ‘Over onze prijzen’, dan gaat dat scannen nog sneller.
Bij TopDevs gebruiken we H3’s om langere pagina’s scanbaar te houden, en we nesten ze netjes zodat de opbouw van het document helder en toegankelijk blijft.
