U bent hier:
- Handleiding
- Ontwikkeling
- Beschrijvende markup
- Voorbeelden
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)
<font size=“+3” face=“Arial Narrow”>
<b>Visuele markup</b>
</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)
<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:
h1 {
font-size : 130%;
font-family : "Arial Narrow"; font-weight : bold;
}
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 CSS.
Inhoudsopgave: De Handleiding
Inhoudsopgave: Beschrijvende markup
