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

8. Betekenisvol opmaken

Een webtekst opmaken gaat niet alleen over vormgeving, maar ook over betekenis toevoegen. De opmaak van een tekst voegt betekenis (semantiek) toe. Zo is de content ook begrijpelijk voor zoekmachines zoals Google en mensen die screenreaders gebruiken.

8.1 Betekenisvol opmaken: fijn voor Google en onze blinde medemens

Een voorbeeld. Stel je hebt een artikel en bovenaan staat een titel:

Belastingvoordeel voor alleenstaande moeders

Zoals je wellicht weet, is Google de grootste blinde. Google kan niet zien wat de titel is op basis van de vormgeving. Google kijkt in de onderliggende html-code en ziet dit:

<h1>Belastingvoordeel voor alleenstaande moeders</h1>

Doordat de tekst omringd is met de h1-tag (heading 1), weet Google dat dit de titel is.

Maar ook blinde gebruikers vinden het handig als de titel een h1-tag heeft. Zij gebruiken een screenreader. Door de h1-opmaak vertelt zijn screenreader hem wat de titel van de pagina is.

Met opmaak voeg je dus betekenis toe. Om die reden wordt de WYSIWYG-editor (What You See Is What You Get) ook wel WYSIWYM genoemd: What You See Is What You Mean. Het gaat om betekenis geven aan de teksten, om het aanbrengen van structuur. In dit hoofdstuk benoemen we enkele belangrijke aandachtspunten voor het betekenisvol opmaken van tekst.

8.2 Gebruik van headings

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
Tip: 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.

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.

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.

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.

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

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

8.3 Opmaken van tekst

Gebruik een aparte stijl voor de opmaak van de lead

Een artikel heeft een lead (een samenvatting), direct onder de titel. Vaak is er behoefte om de lead een andere opmaak te geven. Gebruik daar een apart opmaakprofiel voor en maak de lead niet handmatig op. Overleg eventueel met je webbouwer hoe dit technisch kan worden opgelost.

In de HTML-code ziet dat er dan bijvoorbeeld als volgt uit:

<div class="lead">
<p>Dit is de lead.</p> </div>

Bij voorkeur is er in het cms een apart invoerveld voor deze lead.

Aparte invoervelden voor titel en lead in een cms

Gebruik vet om nadruk te leggen op woorden of zinsdelen

Gebruik vet alleen om een woord of zinsdeel nadruk te geven.

Bijvoorbeeld:

Let op: Op Goede Vrijdag sluit de bibliotheek al om 17.00 uur.

Gebruik vet niet om een paragraaftitel of een samenvatting op te maken. Als je dat doet, geef je de tekst niet de goede betekenis mee. Zoekmachines en mensen met spraak-/braille-uitvoer zullen de betekenis van de tekst niet begrijpen.

Cursief kan in principe ook gebruikt worden voor nadruk, maar cursief leest minder goed op het web (zie Prioritizing Web Usability van Jakob Nielsen). Gebruik liever vet dan cursief. Als je cursief gebruikt, doe dat bij voorkeur enkel voor losse woorden.

Gebruik een [Enter] om naar een nieuwe alinea te gaan

In bijna elk contentmanagementsysteem (cms) start een Enter een nieuwe alinea. In plaats van een Enter gebruiken mensen vaak ook een Shift-Enter (of 2 x keer een Shift-Enter) om zo minder of juist meer afstand te krijgen tussen 2 alinea's. Met een Shift-Enter gaat de cursor naar een nieuwe regel, maar niet naar een nieuwe alinea. Je maakt dan in de html een zogenaamde break : <br>. Er wordt geen nieuwe alinea gestart.

Het is beter om echt een nieuwe alinea te starten, om verschillende redenen:

  • Vanuit taalkundig perspectief: het is over het algemeen beter echte alinea's te gebruiken en niet een pseudo-nieuwe alinea te starten. Kies voor dezelfde alinea óf voor een nieuwe.
  • Vanuit usability: het is ook goed zichtbaar dat een nieuwe alinea is gestart en je houdt een uniforme huisstijl op de site.
  • Vanuit vindbaarheid: zoekmachines interpreteren een alinea als een zelfstandige teksteenheid. Wanneer bepaalde trefwoorden samen in een alinea voorkomen, geeft een zoekmachine deze een zwaarder gewicht.
  • Vanuit toegankelijkheid: als je de tekst in echte alinea's opmaakt, kunnen gebruikers van screenreaders gemakkelijker van alinea naar alinea springen. Het is zo gemakkelijker om de tekst te scannen.

Als de afstand tussen alinea's te groot is, vraag dan de webbouwer om de alineastijl in de css aan te passen. Dan is de afstand direct in de hele website goed.

Gebruik liever geen lege alinea's om ruimte te creëren. Dat regel je beter door met css extra witruimte aan de opmaakprofielen toe te voegen.

Er zijn situaties waarin je wel een break (Shift-Enter) kunt gebruiken, bijvoorbeeld bij het weergeven van adresgegevens, zoals hieronder.

Burgemeester de Withstraat 12
3732 EK De Bilt

Gebruik bij opsommingen de opsommingsopties van de teksteditor

De meeste cms'en (en tekstverwerkingsprogramma's) hebben aparte knoppen om opsommingen op te maken. Er is een ongeordende opsomming en een geordende opsomming (zie afbeelding hieronder voor een voorbeeld in een editor). De internetterm voor een opsomming is 'Lijst' (in het Engels 'list').

De knoppen voor geordende en ongeordende opsomming in een editor van een cms

Om te zorgen dat ook in de html-code de tekst als een opsomming gecodeerd wordt, is het belangrijk de opsommingsmogelijkheden uit de editor te gebruiken en opsommingen niet op een andere manier op te maken.

De html van een ongeordende opsomming is bijvoorbeeld:

<ul> <li>Fietsen</li> <li>Wandelen</li> </ul>

En op de site ziet dat er als volgt uit:

  • Fietsen
  • Wandelen

Een genummerde lijst of geordende opsomming heeft als html-code bijvoorbeeld:

<ol> <li>Fietsen <li>Wandelen </ol>

En op de site ziet dat er als volgt uit:

  1. Fietsen
  2. Wandelen

Omdat een opsomming niet altijd de gewenste opmaak heeft, kiezen webredacteuren er soms voor om de opsomming op een andere manier te maken, bijvoorbeeld door voor een gewone alinea een streepje (min-teken) te plaatsen. Of bij genummerde opsommingen door er gewoon een cijfer voor te zetten.

Dat heeft enkele nadelen:

  • Vanuit toegankelijkheid: omdat de tekst niet opgemaakt is als een echte lijst herkent de spraak- en braille-uitvoer hem ook niet als opsomming.
  • Vanuit gebruiksvriendelijkheid: opsommingen zijn visuele ankerpunten bij het lezen, net als kopjes en hyperlinkteksten. Niet goed vormgegeven opsommingen kunnen makkelijk over het hoofd gezien worden bij het snel scannen van een pagina. En als elke redacteur de opsommingen weer anders invoert, maakt dat de site slordig en inconsistent.
  • Vanuit vindbaarheid: goed opgemaakte opsommingen krijgen in zoekmachines een zwaarder gewicht.

Soms heeft een opsomming niet de gewenste opmaak, zoals te veel witruimte of te veel inspringen. De oplossing is ook hier: pas dit aan in de css.

Vermijd quick & dirty-opmaak

Gebruik in de teksteditor niet de knoppen voor onderstrepen, lettertype, lettergrootte, letterkleur en achtergrondkleur:

  • Onderstrepen: mensen zullen denken dat het een hyperlink is.
  • Lettertype, lettergrootte, letterkleur en achtergrondkleur aanpassen: gebruik hiervoor de opmaakprofielen. Het lettertype ligt vast in de opmaakprofielen die gebaseerd zijn op de gekozen huisstijl voor de website.

Uiteraard is het beter als deze knoppen helemaal niet in de editor aanwezig zijn.

8.4 Opmaken van een tabel

Tabellen kunnen erg handig zijn om informatie kort en overzichtelijk weer te geven. Als de tabel ingewikkelder wordt, wordt het echter snel moeilijker om deze ook semantisch goed op te maken.

Tabel met alleen kolomkoppen

Hieronder zie je een voorbeeld van een mooi opgemaakte tabel met de kosten van een paspoort:

Goed opgemaakte tabel (gemeente Vught)

De tabel heeft 2 kolommen. Elke kolom heeft een kolomkop. Voor ons is deze tabel duidelijk, maar hoe maak je nu aan Google en gebruikers van screenreaders duidelijk dat 'Soort paspoort' hoort bij elke 1e cel van elke regel?

Dit doe je door tabelkoppen op te maken met een zogenaamde 'table header', een <th>. De gewone cellen hebben de opmaak 'table data', in html een <td>. In onderstaande afbeelding zie je dat verder uitgewerkt.

De kop van een tabel kun je boven (en buiten) de tabel zetten. Geef deze een heading (bijvoorbeeld h2 of h3) mee.

Met een eenvoudige tabel met 2 kolommen is dit alles wat je hoeft te doen om deze semantisch goed op te maken. En deze dus goed vindbaar én toegankelijk te maken.

Tabel met th's en td's zichtbaar gemaakt

Tabel met kolomkoppen en rij-koppen

Iets complexer is een tabel waarbij je ook rij-koppen gebruikt. Het idee is hetzelfde: de koppen van de rijen krijgen ook een <th>-opmaak.

<td></td> <th>Mannen</th> <th>Vrouwen</th>
<th>Lengte</th> <td>183 cm</td> <td>176 cm</td>
<th>Gewicht</th> <td>84 kg</td> <td>72 kg</td>

Let er op dat de cel linksboven geen <th>-opmaak heeft, dat is namelijk gewoon een lege cel.

Complexere tabellen

Soms zijn tabellen complexer dan de voorbeelden hierboven, bijvoorbeeld een tabel waarbij er cellen zijn samengevoegd. Hieronder een voorbeeld van de oude site van de NS: naast 'vol tarief' en 'reductie' hebben de kolommen nog een kop erboven: '2e klas'. Deze kop hoort bij 2 kolommen. Technisch is het mogelijk om ook dit semantisch goed op te maken, maar dat is erg ingewikkeld. Het voert te ver om dat hier uit te leggen. Ons advies: probeer samengevoegde cellen te voorkomen. En ook een dubbele tabelkop.

Complexe tabel op oude website NS

Voorbeeld niet goed opmaakte tabel

Hieronder nog een voorbeeld van een tabel die niet goed is. Kijk anders eerst even naar de tabel. Zie je wat er niet goed is?

Niet goed opgemaakte tabel

Het probleem zit hier in de tussenzinnen 'Voor de eerste 300 m3 afgevoerd water' en 'Voor iedere m3 boven de 300 m3 afgevoerd water'.

Deze tabel moet gesplitst worden in 2 tabellen, waarbij beide zinnen boven elke tabel staan.

8.5 Blockquote

Behalve de gewone opmaakprofielen zijn er ook een aantal bijzondere, die weinig voorkomen. De belangrijkste is de blockquote, waarmee je een citaat aangeeft:

Voorbeeld van een blockquote (citaat)

De blockquote gebruik je alleen bij een los geplaatst citaat. Bij een citaat dat is opgenomen in een lopende zin kun je dus geen blockquote gebruiken:

'De toekomst is aan de elektrische auto, niet aan auto's die op fossiele brandstof rijden', aldus Elon Musk in zijn talk bij Top Gear.

8.6 Microdata met rich snippets

Met microdata maak je de betekenis duidelijk van stukjes content op je pagina, bijvoorbeeld een datum, een prijs, een waardering of een locatie. Ze zijn bedoeld voor zoekmachines. Die kunnen daarmee de betekenis (semantiek) van jouw content beter begrijpen.

Google maakt hiervoor gebruik van rich snippets en het protocol schema.org. Hierin staan de afspraken welke tags je gebruikt. Wil je de startdatum van een training geven, dan gebruik je 'startDate' om de datum en tijd in een voorgeschreven formaat aan te geven. De volledige tekst is dan:

8 maart 2016<meta itemprop="startDate" content="2016-03-08T10:00">

Deze microdata staat dus direct bij de content die het betekenis geeft.

Het gebruik van microdata heeft 2 voordelen:

  • Betere indexatie door zoekmachines
  • Betere zichtbaarheid van jouw pagina's in zoekmachines

Hieronder een voorbeeld waarbij je het effect van microdata in de zoekresultaten van Google ziet. Behalve de titel en snippet toont Google hier ook de data van de training en de locatie.

Zoekresultaat met microdata

Meer weten?

Lees Rich Snippets, een inleiding en tutorial van Joost de Valk

top

Feedback

Contact

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