Beschrijvende markup

HTML wordt wijdverspreid toegepast op het web als een manier om inhoud in tekstdocumenten te structureren. Deze structuur wordt ‘markup’ genoemd. 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.

Inhoudsopgave

• Het verschil tussen beschrijvende en valide markup
• Een korte historie van HTML
• Voorbeelden van beschrijvende markup
• Waarom is beschrijvende markup belangrijk?
• Het schrijven van beschrijvende markup
• Links en referenties

---

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

Een korte historie van HTML

In de begintijd van HTML stelde markup nog niet zo veel voor; er was markup voor kopregels, paragrafen en titels. Dit was een bescheiden poging tot het beschrijven van de inhoud. HTML ontwikkelde zich en browser-makers als Netscape en Microsoft lieten hun invloed gelden. De commercialisering van het web leidde tot markup voor letterstijlen, kleuren en andere visuele effecten; markup die vertelt hoe inhoud eruit dient te zien, visuele 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)

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)

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:

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 ook Scheiding van structuur en vormgeving.

Tegenwoordig hebben webontwikkelaars de beschikking over een breed repertoire aan markup-codes om inhoud betekenis te geven. Daarnaast is er CSS (Cascading Style Sheets). CSS is effectiever en geavanceerder dan visuele markup. Met de huidige ondersteuning voor CSS door browsers en de noodzaak voor toegankelijke websites, is er tegenwoordig geen reden meer om visuele in plaats van beschrijvende markup toe te passen.

Waarom is beschrijvende markup belangrijk?

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.

Het schrijven van beschrijvende markup

Webontwikkelaars of contentbeheerders moeten bij het schrijven van beschrijvende markup uit gaan van de (tekstuele) inhoud van de pagina. Op deze inhoud passen zij structuur toe uit een repertoire HTML-elementen, die elk een eigen doel hebben.

De door de auteur aangeleverde inhoud is zelden één lange lap tekst; vaak heeft de auteur al een indeling in paragrafen, kopregels en subkopregels gemaakt. Deze structuur is uitstekend te vertalen in een beschrijvende structuur.

Kopregels

Voor kopregels heeft de webontwikkelaar de beschikking over de heading elementen: h1, h2, h3, h4, h5 en h6. De <h1></h1> tags worden gebruikt voor de belangrijkste kopregel(s) op een pagina, de <h2></h2> voor kopregels hieronder. Daaronder volgen kopregels met <h3></h3>, enzovoort.

Gerelateerde richtlijnen

• R-pd.3.2: Gebruik markup voor kopregels die de hiërarchie van de informatie op de pagina uitdrukken.
• R-pd.3.3: Sla in de markup geen niveaus in de hiërarchie van kopregels over.

Paragrafen

Paragrafen zijn stukken tekst die doorgaans één onderwerp behandelen. Paragrafen onderscheiden zich voor het oog vaak als blokken tekst, gescheiden door een witregel. Er is markup beschikbaar voor het produceren van witregels, het br element, maar beter is het gebruik van markup voor het aangeven van paragrafen: het p (paragraph) element.

Gerelateerde richtlijnen

• R-pd.3.4: Gebruik het p (paragraph) element voor het aangeven van paragrafen. Gebruik niet het br (linebreak) element voor het scheiden van paragrafen.

Tekstopmaak

Voor het opmaken van woorden en regels staat de webontwikkelaar en contentbeheerder een breed repertoire aan elementen ter beschikking. Hier volgen de belangrijkste.

Gerelateerde richtlijnen

• R-pd.3.5: Gebruik het em (emphasis) en strong element voor het aangeven van nadruk.
• R-pd.3.6: Gebruik het abbr (abbreviation) element voor afkortingen indien er onduidelijkheid zou kunnen ontstaan over de betekenis ervan, de afkorting een zeer belangrijke rol speelt in de tekst of wanneer de afkorting niet voorkomt in het Nederlands woordenboek.
• R-pd.3.7: Gebruik het dfn (definition) element voor het aangeven van termen, elders gedefiniëerd in een definitielijst.
• R-pd.3.8: Gebruik het ins (insertion) en del (deletion) element voor het aangeven van regelmatige wijzigingen in de inhoud van een pagina.
• R-pd.3.9: Vermijd het gebruik van het sup (superscript) en sub (subscript) element waar mogelijk.

Referenties en citaten

Referenties naar personen of titels van boeken en andere publicaties kunnen worden opgemaakt met het cite element. cite markup wordt in grafische browsers standaard cursief weergegeven.

Gerelateerde richtlijnen

• R-pd.3.10: Gebruik het cite element voor referenties naar personen en titels.
• R-pd.3.11: Vermijd het gebruik van het q (quotation) element.
• R-pd.3.12: Gebruik het blockquote element voor het aangeven van (lange) citaten.

Lijsten

Een van de meest gebruikte en meest overzichtelijke vormen van informatieoverdracht is de lijst. Lijsten zijn direct inzichtelijk voor de lezer: ze delen de informatie op in aandachtspunten, al dan niet geordend op prioriteit.

Gerelateerde richtlijnen

• R-pd.3.13: Gebruik ol (ordered list) en ul (unordered list) elementen voor het aangeven van lijsten.
• R-pd.3.14: Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor het aangeven van een lijst met definities.

Beschrijvende namen voor class en id attributen

Elementen kunnen worden gemarkeerd met de HTML-attributen class en id. Vervolgens kunnen ze eenvoudig worden gemanipuleerd met CSS (Cascading Style Sheets). Ook kan een beschrijvende naam worden gegeven aan een verder anoniem element (bijvoorbeeld, om er naartoe te linken).

Gerelateerde richtlijnen

• R-pd.3.15: Geef betekenisvolle namen aan id en class attributen.