Omslag van 'Handboek webcontent: meer focus, minder content'

9. Headings voor betekenisvol opmaken

Headings zijn belangrijke aanduiders van de structuur van de pagina. Een goed gebruik is belangrijk. Denk hierbij aan het volgende:

  • Gebruik kopopmaakprofielen (headings) voor alle koppen
  • Gebruik één h1 per pagina
  • Sla geen niveaus over
  • Gebruik geen headings voor een opmerking enzovoort

9.1 Gebruik kopstijlen (headings) voor koppen

Titels van paragrafen en subparagrafen moeten altijd een heading (of kopopmaakprofiel) krijgen. Een titel boven een tekst heeft een heading 1-opmaakprofiel, kortweg h1. Een kopje daarna geef je een h2-opmaakprofiel, weer een niveau lager kies je voor h3. Met het gebruik van kopjes structureer je een tekst.

Gebruik van h1 en h2 op een webpagina

Door de juiste kopstijlen (zoals h1 en h2) te gebruiken is deze structuur voor iedereen duidelijk, ook voor mensen die een screenreader gebruiken. Gebruikers van screenreaders kunnen zo eenvoudig van kop naar kop springen en zo snel de inhoud van de pagina scannen. Bovendien geven zoekmachines tekst in kopstijlen een zwaarder gewicht, dus de juiste kopstijlen gebruiken is ook belangrijk voor een betere vindbaarheid in zoekmachines.

Een veel voorkomende fout is dat een redacteur een kopje enkel vet maakt. Het ziet er dan wel uit als een kopje, maar er ontbreekt een kopstijl. Blinden nemen deze kop niet waar, want de kop is niet opgenomen in de koppenlijst die hun software geeft. En ook zoekmachines vinden deze kop niet en begrijpen zo minder goed wat de structuur van de pagina is. Dus: zorg dat elke kop een kopstijl heeft.

Wil je de vormgeving van de heading veranderen? Bijvoorbeeld omdat je de heading te groot vindt of omdat ervoor of erna te veel witruimte is? Pas de heading dan niet handmatig aan, maar doe dat in de opmaakstijl die bij je site hoort, de cascading style sheets (css). Dan geldt die aanpassing direct voor de hele site.

In ons e-book 'Webtechniek voor niet-techneuten' bespreken we de add on Web Developer. Daarmee kun je eenvoudig de koppen op een pagina zichtbaar maken.

9.2 Gebruik slechts één h1 per pagina

De h1 gebruik je voor de titel van de pagina. Er kan er daarom maar 1 zijn.

Hieronder zie je een voorbeeld waarbij er 2 h1's op de pagina staan. De 2e h1 is in feite de lead. Probeer een dubbele h1 altijd te voorkomen.

Dubbele h1
Noot: In html5 is het mogelijk om meer dan één h1 op een pagina te gebruiken, maar screenreaders gaan daar nog niet goed mee om. Ook is het aannemelijk dat zoekmachines dit nog niet goed doen. Dus advies blijft om maar één h1 per pagina te gebruiken.

9.3 Sla geen niveaus over

Net zoals bij een gewoon tekstdocument is het een goed gebruik om bij de paragraaftitels geen niveaus over te slaan. Na een h1 (de titel) komt een h2 en niet een h3. In een tekstdocument komt na 'hoofdstuk 1' ook niet direct 'paragraaf 1.0.1'. Na een h2 kan een h2 of een h3 komen.

Stel je schrijft een artikel over zoogdieren. Een logische indeling is dan:

(h1) Zoogdieren

(h2) Olifanten

(h3) Afrikaanse olifant

(h3) Aziatische olifant

(h2) Apen

(h3) Chimpansee

(enzovoort)

De niveaus zijn een weergave van de structuur van de pagina. Met het programma HeadingsMap krijg je alle headings in een lijstje, zodat je goed kunt zien of je geen niveaus hebt overgeslagen. Als de hiërarchie niet goed is, dan wordt dat in rood aangegeven (zie ook afbeelding hieronder).

Kopstijlen zichtbaar gemaakt met HeadingsMap. Er is geen juiste volgorde gehanteerd.

9.4 Gebruik headings niet voor een pay-off, ondertitel of een opmerking

Headings zijn bedoeld voor het weergeven van de inhoudsstructuur van de pagina, dus voor een hoofdstuk of een paragraafkop. En niet voor het extra opmaak geven aan een pay-off, ondertitel of opmerking.

Hieronder een voorbeeld waarbij ten onrechte een h2 is gebruikt voor de ondertitel.

h2-heading gebruikt voor ondertitel

9.5 Gebruik alleen headings als er ook content onder de heading staat

Een kopje zonder tekst of andere content er onder, is een nutteloze kop en moet je daarom niet gebruiken. Vergelijk dit met een tekstdocument met een kopje maar zonder tekst eronder.

Hieronder zie je een voorbeeld waarbij kopjes (Inwoner, Ondernemer en Bestuur) zijn gebruikt voor het maken van buttons. De kopjes hebben geen content. Er staat geen tekst onder en de afbeelding bij elke kop is decoratief, dus die heeft ook geen inhoud.

Onterechte gebruik van headings voor kopjes zonder content

9.6 Opsommingen in plaats van headings

Soms is een opsomming beter dan een heading, bijvoorbeeld als er relatief weinig tekst onder de heading is of als de tekst eigenlijk een opsomming is.

In het voorbeeld hieronder staat een routebeschrijving. De bezoeker krijgt beschrijvingen vanuit Den Haag en Delft. Beide beschrijvingen zijn opgemaakt met koppen, maar het zijn in feite opsommingen. Ze kunnen hier beter als opsomming geplaatst worden.

Beschrijving opgebouwd met headings

Hieronder dezelfde routebeschrijving, maar nu is er gebruik gemaakt van een opsomming. De headings zijn niet meer nodig, alleen nog op de kop Auto die er boven staat.

Beschrijving opgebouwd met opsommingen
top

Was dit nuttig?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.