Gebruik de knoppen van de editor om koppen, paragrafen, citaten, opsommingen en nadruk aan te geven

Zorg dat de betekenis van tekstonderdelen zoals een kop of een opsomming ook in de onderliggende HTML-code is vastgelegd. Dat bereik je eenvoudig door de knoppen van de editor te gebruiken.

Hoe pas ik dit toe?

De meeste teksten hebben een structuur. Ze bevatten koppen, tussenkopjes, paragrafen, opsommingen, citaten of benadrukte woorden of zinsdelen. Bezoekers die de webpagina kunnen zien weten direct wat de koppen zijn, waar opsommingen staan en wanneer het een citaat betreft. Dit wordt duidelijk uit de visuele vormgeving van deze onderdelen.

Bezoekers die hulptechnologie gebruiken hebben andere aanwijzingen nodig om de betekenis van tekstonderdelen te begrijpen. Hulptechnologie kijkt naar de onderliggende structuur: de HTML-elementen die gebruikt zijn om aan te geven welke betekenis de tekstonderdelen hebben. Door deze HTML-structuur kan hulptechnologie de betekenis van de onderdelen overdragen aan de gebruiker van de technologie.

Om de juiste HTML-elementen toe te passen in teksten kun je het best de knoppen van de editor gebruiken voor de volgende tekstonderdelen:

  • Koppen
  • Paragrafen
  • Citaten
  • Opsommingen, genummerde lijsten en definitielijsten
  • Nadruk (vet of schuingedrukt)

Voorbeelden

Koppen

In de meeste editors kun je een tekst selecteren en aangeven dat dit een kop is. Je kunt hierbij ook het niveau van de kop aangeven. Let erop dat je de niveaus in de juiste hiërarchische volgorde gebruikt. De titel van de pagina is meestal een kop op het eerste niveau (het <h1>-element). Meestal wordt deze automatisch door het CMS in het <h1>-element bovenaan de pagina geplaatst. Dat betekent dat de tussenkoppen in de tekst op het tweede niveau moeten staan (het <h2>-element). Kopjes daaronder komen op het derde niveau, enzovoorts.

In de HTML-code ziet een kop er als volgt uit:

<h2>Dit is een tussenkop op het tweede niveau</h2>

<h3>Dit is een tussenkop op het derde niveau</h3>

Let op: het is dus essentieel om koppen altijd met een HTML-element te markeren, en niet alleen met vormgeving. Omgekeerd geldt ook dat je een tekst die géén kop is niet als kop moet markeren alleen vanwege de vormgeving. Doe je dat wel, dan wordt de verkeerde betekenis overgedragen. Wil je een andere stijl gebruiken voor een bepaalde tekst, vraag dan aan de bouwer of hij een stijl in kan bouwen in de editor.

Paragrafen

Vaak maakt de editor automatisch een paragraaf van je tekst als je begint te typen. Hiervoor moet het <p>-element worden gebruikt. Let goed op of dit daadwerkelijk gebeurt. Zo niet, dan moet je met de juiste knop in de editor de paragrafen markeren. Ook na het markeren van een kop moet je vaak aangeven dat de tekst die volgt weer een paragraaf is.

In de HTML-code ziet een paragraaf er als volgt uit:

<p>Dit is een paragraaf…</p>

Let op: visueel kun je een tekst in paragrafen verdelen door er witregels tussen te plaatsen. Als je het <p>-element gebruikt gebeurt dit meestal automatisch, door de browser of door de stijlen die in het CSS-bestand van de website staan. Je kunt ook witregels maken met het <br>-element. Doe dit echter niet om paragrafen aan te geven. Het <br>-element heeft niet de betekenis ‘paragraaf’. Je kunt dit element wel gebruiken om bijvoorbeeld dicht- of adresregels te maken.

Citaten en bronvermeldingen

Citaten worden vaak als losse blokken in een lopende tekst getoond. Door het <blockquote>-element te gebruiken kun je aangeven dat het om een citaat gaat. Ook voor de bronvermelding bestaat een HTML-element, namelijk het <cite>-element.

Een citaat met bronvermelding kan er zo uitzien in HTML-code:

<blockquote>
  <p>De kunst van te leven is thuis te zijn alsof men op reis is.</p>
  <cite>Godfried Bomans</cite>
</blockquote>

Opsommingen en genummerde lijsten

Opsommingen en genummerde lijsten kun je met de knoppen van de editor aanmaken. Afhankelijk van je keuze worden er opsommingstekens of nummers voor de punten uit de lijst getoond.

Voor opsommingen wordt het <ul>-element gebruikt. Dat staat voor ‘unordered list’. Als je op deze wijze een opsomming maakt, wordt elk onderdeel voorafgegaan door een opsommingsteken. In de HTML-code ziet een opsomming er als volgt uit:

<ul>
  <li>Eerste onderdeel uit de opsomming.</li>
  <li>Tweede onderdeel uit de opsomming.</li>
  <li>...</li>
</ul>

Voor genummerde lijsten wordt het <ol>-element gebruikt. Dat staat voor ‘ordered list’. Als je op deze wijze een genummerde lijst maakt, wordt elk onderdeel voorafgegaan door een nummer. In de HTML-code ziet een genummerde lijst er als volgt uit:

<ol>
  <li>Eerste onderdeel uit de genummerde lijst.</li>
  <li>Tweede onderdeel uit de genummerde lijst.</li>
  <li>...</li>
</ol>

Let op: gebruik altijd de knoppen van de editor. Door alleen elk woord op een nieuwe regel te zetten, voorafgegaan door een liggend streepje, maak je geen echte lijst. Voor bezoekers die hulptechnologie gebruiken is het niet meer dan een brij van streepjes en woorden. Alleen door de juiste HTML-code (of knop in de editor) te gebruiken maak je een échte lijst.

Definitielijsten en andere naam-waardelijsten

Voor lijsten die bestaan uit een naam, term of begrip en één of meer bijbehorende waarden of beschrijvingen bestaat een apart HTML-element: de definitielijst (het <dl>-element). Dit element kun je bijvoorbeeld voor een verklarende woordenlijst gebruiken.

Binnen een <dl>-element gebruik je het <dt>-element om de term aan te geven (definition term) en het <dd>-element om de beschrijving of waarde aan te geven (definition description).

<dl>
  <dt>Browser</dt>
  <dd>Een computerprogramma om webpagina’s te bekijken.</dd>
  <dt>Weblog</dt>
  <dd>Een website die periodiek wordt geüpdatet, vergelijkbaar met een dagboek.</dd>
</dl>

Niet alle editors zullen een knop hebben om deze soort lijst in te voegen. Vaak wordt een verklarende woordenlijst automatisch door het CMS gegenereerd. De bouwer moet in dat geval de HTML-elementen voor een definitielijst gebruiken.

Nadruk

Als je woorden of zinsdelen wilt benadrukken doe je dat vaak door ze vet of schuingedrukt te maken. Als de editor juist is ingericht zijn er knoppen om dit te doen, zodat de juiste HTML-elementen worden gebruikt.

Een woord met nadruk kan er als volgt uitzien:

Bel <em>nu</em> een dokter!

Een belangrijk woord kan er als volgt uitzien:

<strong>Let op</strong>: dit is geen drinkwater.

Voorleessoftware kan woorden met nadruk op een andere wijze uitspreken, als de nadruk met de juiste HTML-elementen is aangegeven. Zo wordt de betekenis die zichtbaar is door de vormgeving (vet of schuingedrukt) ook waarneembaar voor bezoekers die hulptechnologie gebruiken.

Hoe draagt dit bij aan een betere website?

Door de structuur van teksten met de juiste HTML-elementen aan te geven wordt de betekenis van de onderdelen niet alleen met visuele vormgeving overgedragen. Dat maakt het veel eenvoudiger voor browsers en hulptechnologie om de tekst op een andere manier aan bezoekers aan te bieden, met behoud van de structuur. Bijvoorbeeld in hoog contrast, in braille of als gesproken tekst.

Daarnaast maken ook zoekmachines gebruik van deze HTML-code om te bepalen welke onderdelen van een tekst belangrijk zijn. Koppen bevatten bijvoorbeeld vaak belangrijke zoekwoorden. Hierdoor worden webpagina’s beter vindbaar in zoekmachines.

Bouwer of redacteur?

De bouwer is verantwoordelijk voor het inrichten van de editor in het CMS. Idealiter zijn er knoppen om alle bovengenoemde tekstonderdelen aan te geven, voor zover ze van toepassing zijn op de betreffende website. De redacteur moet zorgen dat de knoppen op de juiste wijze worden gebruikt, zodat de structuur van de tekst klopt.

Technische details

  • Hoort bij toegankelijkheidseis 1.3.1
  • Niveau A

Hoort bij