Gebruik de knoppen van de editor voor de structuur

De meeste teksten hebben een structuur: ze bestaan uit koppen, tussenkopjes, paragrafen, opsommingen, aanhalingstekens of gemarkeerde woorden of groepen van woorden. Bezoekers die de webpagina kunnen zien, weten direct waar de koppen staan, waar de opsommingen staan en wanneer het een citaat is. De visuele effecten maken dit duidelijk. Bezoekers die gebruik maken van assistentietechnologie hebben extra aanwijzingen nodig om de betekenis van tekstelementen te begrijpen.

Het definiëren van de tekststructuur met de juiste HTML-elementen stelt je in staat om op meer dan alleen opmaak te vertrouwen om de betekenis van de elementen over te brengen. Dit maakt het veel gemakkelijker voor browsers en ondersteunende technologieën om de tekst op een andere manier weer te geven, met behoud van de structuur.

Daarnaast gebruiken zoekmachines deze HTML-code ook om te bepalen welke elementen van een tekst belangrijk zijn. Kopteksten bevatten bijvoorbeeld vaak belangrijke trefwoorden. Dit maakt het makkelijker om webpagina's te vinden.

Hoe pas je dit toe?

Assistentietechnologie analyseert de onderliggende structuur, d.w.z. de HTML-elementen die worden gebruikt om de betekenis van tekstelementen aan te geven. Deze HTML-structuur maakt het mogelijk dat de ondersteunende technologie de betekenis van de elementen aan de gebruiker overbrengt. Om de juiste HTML-elementen in teksten te gebruiken, kun je het beste met de toolbar uit de editor werken voor de volgende elementen:

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

Koppen

In de meeste editors kun je een tekst selecteren en aangeven dat dit een koptekst is. Je kunt hierbij zelfs het niveau van de koptekst opgeven (titel of subtitel of tussentitel,...). Let er wel op 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). Als algemene regel zal het CMS die automatisch in het <h1>-element bovenaan de pagina plaatsen. Dit betekent dat tussenkoppen in de tekst op het tweede niveau moeten staan (het <h2>-element). De kopjes daaronder komen op het derde niveau en zo verder.

In de HTML-code ziet dat er zo uit:

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

Paragrafen

Meestal maakt de editor automatisch een paragraaf met jouw tekst wanneer je begint te typen. Om dit te doen, pas je het <p>-element toe aan het begin van het tekstblok en </p> aan het einde van het blok. Zorg ervoor dat dit inderdaad het geval is. Zo niet, dan moet je de paragrafen markeren met de juiste knop in de editor. Op dezelfde manier moet je na het markeren van een koptekst vaak aangeven dat de tekst die volgt een paragraaf is.

In de HTML-code ziet een paragraaf er zo uit:

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

Geen witregels

Tussen elk deel van de tekst (<p>) komt de regelafstand automatisch overeen met de browser of de stijlen die zijn opgeslagen in het CSS-bestand van de website.

Het is echter ook mogelijk om een regelafstand in te voegen met het <br>-element zonder noodzakelijkerwijs een nieuwe paragraaf aan te maken.

• Voorbeelden: een postadres of verzen van een gedicht

Citaten en bronvermeldingen

Citaten worden vaak gepresenteerd als losse blokken in een lopende tekst. Gebruik het <blockquote>-element om aan te geven dat het een citaat is. Referenties hebben ook een eigen HTML-element: het <cite>-element.

Een citaat met bronvermelding kan er dus 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

Je kunt opsommingen en genummerde lijsten maken met de knoppen van de editor. Elk item in jouw lijst kan worden weergegeven met een opsommingsteken of een nummer, afhankelijk van jouw voorkeur.

Het <ul>-element wordt gebruikt voor ongeordende lijsten (‘unordered list’). Wanneer je op deze manier een opsomming maakt, wordt elk item voorafgegaan door een opsommingsteken (‘bullet’). Dit ziet er als volgt uit in de HTML-code :

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

Voor genummerde lijsten wordt het <ol> ('geordende lijst') element gebruikt. Wanneer je een lijst maakt die op deze manier geordend is, wordt elk element voorafgegaan door een nummer. Een genummerde lijst ziet er als volgt uit in de HTML-code:

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

Definitielijsten en andere naam-waardelijsten

In het geval van een lexicon of woordenlijst wordt elke naam, term of concept geassocieerd met een eigen, afzonderlijk HTML-element.

• <dl> (definitielijn) geeft aan dat er een reeks definities wordt gestart. Om deze serie af te sluiten, eindig je met </dl>.
• <dt> (definiërende term) geeft de te definiëren term aan. Om de term te beëindigen, eindig je met </dt>.
• <dd> (definitiebeschrijving) geeft aan dat je begint met het definiëren van de term. Om de beschrijving af te sluiten, eindig je met </dd>.

<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 dit soort lijsten in te voegen. Vaak genereert het CMS automatisch een woordenlijst. In dit geval moet de ontwikkelaar de HTML-elementen gebruiken voor een lijst met definities.

Nadruk

Wanneer je de aandacht wilt vestigen op woorden of groepen van woorden, zet je ze meestal vet (<strong>) of cursief (<em>). Als de editor goed is geconfigureerd, krijg je de juiste knoppen om de juiste HTML-elementen te gebruiken.

Een woord met nadruk kan er zo uitzien:

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

Een woord met nadruk kan er ook als volgt uitzien:

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

Tekst-naar-spraaksoftware kan gemarkeerde woorden op een andere manier uitspreken als de markering wordt aangegeven met de juiste HTML-elementen. Zo kan de betekenis die wordt overgebracht door een visueel effect (zoals vet of cursief) ook worden waargenomen door bezoekers met behulp van assistentietechnologie.

Voor redacteurs

De redacteur moet ervoor zorgen dat de knoppen correct worden gebruikt, zodat de structuur van de tekst klopt.

Voor ontwikkelaars

De ontwikkelaar is verantwoordelijk voor het inrichten van de editor in het CMS. Idealiter zijn er knoppen om alle bovengenoemde tekstelementen aan te geven, zolang ze maar op de betreffende website worden gebruikt.