Zoekformulier
Koppen betekenisvol opmaken op een website
Over koppen
Koppen helpen mensen om snel te begrijpen waar een webpagina of document over gaat. Gebruik daarom verschillende kopniveaus om de content goed te structuren. Zorg dat de volgorde van de koppen en tussenkoppen logisch is.
Een paar vuistregels voor het gebruik van koppen:
- Gebruik beknopte koppen.
- Begin de content met een kop van niveau 1.
- Sla geen kopniveaus over:
- Na een kop van niveau 1 volgt een kop van niveau 2.
- Na een kop van niveau 2 volgt opnieuw een kop van niveau 2 óf volgt een kop van niveau 3.
- Zorg dat koppen altijd onderliggende content hebben.
- Zorg dat koppen de onderliggende content beschrijven.
Koppen hebben meerdere functies:
- Schermlezers kunnen een overzicht van alle koppen presenteren. Zo kan snel worden genavigeerd naar de content.
- Schermlezers hebben een ingebouwde sneltoets waarmee snel van kop naar kop kan worden genavigeerd.
- Zoekmachines gebruiken de koppen bij het beoordelen van de content.
Maak koppen op met een kop-element
Koppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een grotere lettergrootte, vetgedrukte tekst, of een andere kleur tekst. Mensen die de tekst kunnen zien, herkennen hieraan meteen wat de koppen zijn maar vormgeving moet niet de enige manier zijn waarop dit wordt overgebracht.
De betekenis moet ook in de code worden toegevoegd, zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een kop en ook de functie heeft van een kop wordt opgemaakt met een kop-element.
Zorg voor een passend kopniveau. Alle koppen samen moeten een goed beeld geven van de inhoud van de webpagina.
Teksten die geen kop zijn, mogen niet worden opgemaakt met een kop-element.
Koppen toevoegen op een website
In een CMS kunnen koppen meestal makkelijk worden toegevoegd in de editor op de pagina. De editor zorgt dat de juiste HTML-elementen worden toegevoegd aan de tekst.
Fout voorbeeld: Kop wordt niet opgemaakt met een kop-element
In deze tekst wordt de kop alleen opgemaakt met vetgedrukte tekst:
In deze tekst wordt de kop alleen opgemaakt met andere lettergrootte:
Goed voorbeeld: Kop wordt opgemaakt met een kop-element
In deze tekst wordt de kop opgemaakt met een kop-element:
Koppen toevoegen met een HTML kop-element
Koppen worden in de code opgemaakt met de code <h1>
tot en met <h6>
.
In de code ziet dat er zo uit:
Zie ook
- WCAG: 1.3.1 Info en relaties
- Categorie: Tekst
- Medium: Website
- Functiegroep: Contentspecialist of redacteur
- Functiegroep: Ontwikkelaar of tester
- Functiebeperking: Visuele beperking