Home > De richtlijnen > Webrichtlijnen 1 > R-pd.3.1

Documenten structureren

HTML wordt wijdverspreid toegepast op het web als een manier om inhoud in tekstdocumenten te structureren. Deze structuur wordt 'markup' genoemd. Met markup kunnen bijvoorbeeld koppen en paragrafen in een tekst worden aangegeven.

Uitleg van deze richtlijn

Beschrijvende markup (ook wel bekend als 'semantic markup' of 'generalised markup') is HTML zoals het oorspronkelijk bedoeld was: het geven van structuur en betekenis aan de inhoud. Beschrijvende markup vertelt een browser wat de inhoud is, in plaats van wat het doet of hoe het eruit moet zien.

Het verschil tussen beschrijvende en valide markup

Beschrijvende markup is niet hetzelfde als valide markup. Valide markup ('well-formed markup') is markup die grammaticaal voldoet aan de HTML -standaard. Deze grammatica kan worden gecontroleerd (gevalideerd) door een programma, zoals de W3C HTML-validator. Beschrijvende markup kan niet geheel geautomatiseerd worden gevalideerd. Een document kan grammaticaal correcte, maar tegelijkertijd betekenisloze markup bevatten. Streef naar zowel grammaticale correcte, als beschrijvende markup.

Voorbeelden van beschrijvende markup

Om te laten zien wat beschrijvende markup is, moet eerst een voorbeeld worden gegeven van visuele markup, markup die vertelt hoe de inhoud eruitziet.

Markup die vertelt hoe de inhoud eruitziet (HTML)

  1. <font size="+3" face="Arial Narrow">
  2.   <b>Visuele markup</b>
  3. </font>

Hier is gepoogd een tekst op een kopregel te laten lijken zonder aan te duiden dat het een kopregel is. Het font element en het b (bold) element worden gebruikt om de tekst in een bepaalde grootte en in het lettertype Arial Narrow te tonen en vetgedrukt te zetten. Suggesties voor vormgeving horen echter thuis in CSS (Cascading Style Sheets). Zie Scheiding tussen structuur en vormgeving.

Hetzelfde effect van het voorbeeld hierboven kan worden bereikt met CSS en beschrijvende markup.

Markup die vertelt wat de inhoud is (HTML)

  1. <h1>Beschrijvende markup</h1>

Het h1 element (heading van niveau 1) is bedoeld voor het aanduiden van de belangrijkste kopregel van een pagina. Vaak wordt deze gebruikt voor de titel bovenaan een document. Deze markup vertelt dat dit de belangrijkste kopregel op de pagina is (zie ook Kopregels). Daarom kan deze tekst door browsers groter en vet worden afgebeeld, door spraakbrowsers luider worden uitgesproken of door zoek-spiders als zeer relevant worden gerekend. De presentatie van deze kopregel kan door de webontwikkelaar worden beïnvloed met CSS:

  1. h1 {
  2.   font-size : 130%;
  3.   font-family : "Arial Narrow"; font-weight : bold;
  4. }

Op het eerste gezicht lijkt dit een toename te zijn in de hoeveelheid code die nodig is om een kopregel op de pagina een bepaald uiterlijk te geven. Echter, als deze CSS wordt gebruikt in een apart bestand en wordt gekoppeld aan alle pagina's op de site, scheelt het in de hoeveelheid code. Zie Scheiding van structuur en vormgeving en Alles over CSS (Cascading Style Sheets).

Voordelen van beschrijvende markup

Voor bezoekers

  • Documenten met beschrijvende markup zijn toegankelijker voor speciale browsers.
    Zo kunnen schermleesprogramma's van kopregel naar kopregel springen en spraakbrowsers bepaalde inhoud met nadruk voorlezen. Visuele markup compliceert het gebruik van deze functies.
  • Documenten met beschrijvende markup laden sneller.
    In combinatie met de scheiding van structuur en vormgeving, kunnen documenten met beschrijvende markup aanzienlijk schelen in bestandsgrootte en dus de download-tijd ervan beperken.
  • Documenten met beschrijvende markup blijven structureel en overzichtelijk als CSS (Cascading Style Sheets) niet wordt ondersteund.
    Oudere browsers die moderne technieken niet ondersteunen, maar ook moderne browsers met beperkte mogelijkheden - zoals op een PDA of een mobiele telefoon - tonen een 'tekstuele' weergave van het document. Dankzij de structuur blijft deze weergave overzichtelijk en bruikbaar.
  • Zoek-spiders putten betekenis en relevantie van de informatie uit de markup van een document.
    Hoe logischer en gepaster deze markup is, hoe efficiënter zoek-spiders het document kunnen indexeren.

"Create a useful, information-rich site and write pages that clearly and accurately describe your content."

Google Webmaster Guidelines

Voor webontwikkelaars en content-beheerders

Beschrijvende markup is overzichtelijk, inzichtelijk en reproduceerbaar. Daardoor vergroot beschrijvende markup de duurzaamheid en herbruikbaarheid van documenten. Gebaseerd op de HTML 4.01 specificatie, vormt beschrijvende markup een universele taal voor webontwikkelaars en content-beheerders.