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

11. Andere vormen van betekenisvol opmaken

Naast headings zijn er veel andere vormen van semantiek of betekenisvol opmaken in een webtekst. Met deze semantiek is de betekenis van de tekst duidelijk voor iedereen en voor zoekmachines.

11.1 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 kun je ook gebruiken om een of enkele woorden extra aandacht te geven. Cursief gebruik je niet voor hele zinnen of alinea's, want dat leest minder goed op het web (zie Prioritizing Web Usability van Jakob Nielsen).

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.

11.2 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.

11.3 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

Wat vind je van dit hoofdstuk?

Feedback

Contact

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