Tot voor kort werd HTML vooral als een middel gezien om dingen visueel te presenteren. Steeds meer webdesigners en client-side scripters krijgen echter door dat er met HTML meer mogelijk is. Door HTML goed te gebruiken kun je je site meer toegankelijk maken en beter scoren bij zoekmachines. Omdat je door gestructureerde HTML veel minder tags nodig hebt voor opmaak (dit gebeurt in CSS) is de verhouding ‘feitelijke inhoud’ tegenover ‘code’ in documenten die weinig ‘tekens’/tags/attributen gebruiken veel gunstiger. Dit leidt automatisch tot betere indexering door zoekmachines. Bovendien wordt je HTML -document veel makkelijker te onderhouden en door de betere structuur makkelijker op te maken met een layout-taal als CSS.

De dagen dat tags als <center> en <font> als normaal geaccepteerd werden zijn nu definitief voorbij. HTML wordt nu als een structurele taal gezien in plaats van een ‘layout-tool’.

Maar wordt HTML wel tot in de puntjes gebruikt? Zijn er nog onbegane paden? Eigenlijk kun je altijd je markup verbeteren. Na het lezen van dit artikel weet je alles over de ondersteuning en het gebruik van de wat minder bekende tags uit de HTML-specificatie, zoals de tags voor afkortingen: <abbr> en <acronym>. Maar ook tags voor citaten, zoals <blockquote> en <q> en <cite> om diegene die je citeert mee aan te geven.

Afkortingen

HTML heeft twee elementen voor afkortingen, zoals gezegd abbr en acronym. Het optionele title attribuut wordt gebruikt om de volledige betekenis van de gebruikte afkorting in ‘op te slaan’. Dit attribuut wordt meestal alleen de eerste keer gebruikt dat een afkorting voorkomt, daarna wordt het weggelaten en er wordt dan vanuit gegaan dat de bezoeker de afkorting begrijpt. Op deze manier kun je in het begin van de tekst mensen met de betekenis van de afkorting kennis latenmaken, als de afkorting daarna terugkeert kun je er vanuit gaan dat de bezoeker hem herkent. Een voorbeeld:

<abbr title="Katholieke Radio Omroep">KRO</abbr>

Dit voorbeeld zul je echter niet snel tegenkomen op het hedendaagse web. Met als voornaamste reden dat de tag onbekend is. Ook ondersteunt de browser die het grootste marktaandeel in handen heeft – Internet Explorer – de tag <abbr> niet. “KRO” is wel zichtbaar in deze browser, maar de ‘tooltip’ (waarvoor het title attribuut zorgt) niet. Daarom wordt (als het al gebruikt wordt) tot nu toe meestal <acronym> gebruikt. Dat ondersteunt IE wel. Ondanks dat de marktleider de tag niet ondersteunt, is het aan te raden <abbr> te gebruiken voor afkortingen die niet uitspreekbaar zijn. Hier zitten uiteraard diepere gedachten achter.

Het heeft eigenlijk alles met de betekenis van de elementen te maken en waarvoor ze bedoeld zijn. Een acroniem is een soort afkorting. Van Dale Taalweb zegt over acroniem:

acro·niem (het ~, ~en)

1. letterwoord
2. afkorting of letterreeks ter vervanging van een veelgebruikte verbinding of formule in de communicatie, m.n. in nieuwsgroepen

Deze definitie verschaft niet heel erg veel duidelijkheid over wat een acroniem nu precies is, maar algemeen kan gesteld worden dat een acroniem een woord is waarvan de letters een afkorting vormen. Een acroniem is dus uitspreekbaar, net als een woord. Een ‘normale’ afkorting is dat niet, daarvan worden de letters één voor één uitgesproken. Een voorbeeld van een acroniem, gestructureerd met HTML:

<acronym title="National Aeronautics &amp; Space 
Administration" lang="en" xml:lang="en">NASA</acronym>

Voor een visuele browser maakt het niet zo heel veel uit. Deze laat alleen de ‘tooltip’ zien en spreekt de afkoring niet uit. Voor een screenreader is het echter wel belangrijk om een afkorting op de juiste manier uit te spreken. Als je bijvoorbeeld de afkorting KRO neemt en je spreekt die uit zonder dat je weet dat het een afkorting is krijg je: “kro”. Weet je dit wel, dan spreek je elke letter afzonderlijk uit en is het ook een stuk begrijpelijker: “Ka-eR-Oo”.

Gelukkig kun je dit verschil sinds kort aangeven. De veel gebruikte screenreader JAWS biedt namelijk sinds versie 4.51 ondersteuning voor de <abbr>-tag. JAWS draait ‘bovenop’ Internet Explorer en leest de informatie die zichtbaar is op het scherm. Ook kun je voor auditieve browsers die ‘aural style sheets’ ondersteunen (momenteel alleen EmacsSpeak) al CSS-codes gebruiken voor <abbr> en <acronym>:

@media aural{
 abbr{
  speak:spell-out;
 }
 acronym{
  speak:normal;
 }
}

Het is belangrijk om elke afkorting in een <abbr> of <acronym> tag te zetten. Je hoeft echter niet elke keer het title attribuut te gebruiken, omdat de gebruiker van de website de betekenis van een afkorting meestal na één keer wel door heeft. Voor gebruikers van screenreaders en auditieve browsers is het natuurlijk wel fijn om de afkorting juist uitgesproken te krijgen.

Naast de eerder genoemde voordelen levert het gebruiken van ‘afkortingselementen’ ook voordelen op voor zoekmachines. Deze indexeren namelijk zowel het title-attribuut als de inhoud, waardoor de gebruiker van de zoekmachine op beide termen je site kan vinden.

Als je het belangrijk vindt dat ook Internet Explorer de betekenis van de afkorting laat zien, dan is het ook mogelijk om voor een alternatieve oplossing te kiezen. Dat is natuurlijk heel begrijpelijk aangezien IE nog steeds het grootste marktaandeel heeft. Door voor het alternatief te kiezen gebruik je het juiste element en is de informatie voor iedereen toegankelijk:

<abbr>KRO</abbr> (Katholieke Radio Omroep)

Je kunt ook een JavaScript-oplossing van Marek Prokop gebruiken: Styling <abbr> in IE.

Citeren

Heel vaak worden bronnen geciteerd als argument in een discussie of onderbouwing in een artikel. Om de bron goed te citeren kun je ook gebruik maken van HTML. HTML heeft namelijk twee tags om een citaat in te zetten: <blockquote> en <q>. De eerste is vooral voor wat grotere citaten die als het ware een hele alinea in beslag nemen. De tweede is bedoeld voor kleinere citaten, binnen een alinea.

Als laatste is er ook nog de tag <cite>, deze wordt gebruikt om de bron van het citaat mee aan te duiden, bijvoorbeeld:

<p><cite>Jeffrey Veen</cite> vertelt waarom 
<abbr>HTML</abbr> zo tegenstrijdig is:</p>

<blockquote 
 cite="http://www.adaptivepath.com/.../000266.php"
 lang="en" xml:lang="en">
 <p>
  Though the sheer ease of creating <abbr>HTML</abbr> 
  pages has clearly been beneficial to the Web’s 
  growth, it’s also been a curse. Because they’re
  so forgiving, Web browsers have facilitated a 
  system of pseudo-code that breaks countless best 
  practices in the programming world.
 </p>
</blockquote>

De URL van Adaptive Path in het voorbeeld hierboven is ingekort. Om de volledige URL te zien: hou de muisaanwijzer stil boven het voorbeeld tot je de ‘tooltip’ ziet verschijnen.

Zoals je ziet maken we in dit geval gebruik van het optionele attribuut cite, dat zowel voor <blockquote> en <q> gebruikt kan worden. Op deze manier wordt het (al dan niet visueel) duidelijk wat de bron is. Dit kan met behulp van een beetje JavaScript ook getoond worden: Simon Willison: Blockquote citations. Ook is er een oplossing met CSS: Dynamically labeling blockquotes with CSS. cite wordt ook in zekere mate ondersteund in Mozilla. In deze browser klik je rechts op de quote en daarna op p (properties). Er komt dan een klein schermpje waar de waarde van het cite-attribuut in staat en de taal van de quote.

Het element <q> wordt haast nooit gebruikt en is eigenlijk af te raden. Het wordt momenteel niet ondersteund door Internet Explorer. De browser zou aanhalingstekens voor en achter het element moeten zetten, maar dat doet IE niet. Gelukkig is het element nog wel van een stijl te voorzien met CSS, maar over het algemeen is het beter om het block-level equivalent te gebruiken: <blockquote>. De CSS-hack die je kunt gebruiken om het element toch van een stijl te voorzien in IE en in andere browsers gebruik te laten maken van de mogelijkheden van het element is:

q{
 font-style:italic;
}
html>body q{
/* IE ondersteunt de child-selector (>) niet */
 font-style:normal;
}

Persoonlijk hou ik niet zo van deze methode, aangezien er ook browsers zouden kunnen zijn die wel de child-selector ondersteunen, maar niet het q element.

Het voordeel van deze ‘pure’ HTML-elementen boven het gebruik van aanhalingstekens of span elementen met een class is dat je ze makkelijker van een eigen stijl kunt voorzien. Ook je broncode wordt hierdoor duidelijker en begrijpelijker. Niet alleen voor jou, maar ook voor Google, waarvan het niet ‘bewezen’ is, maar eigenlijk wel duidelijk is dat deze rekening houdt met HTML-elementen. Ook voor de zogenaamde ‘user style sheets’, CSS-bestanden die aangemaakt worden door de gebruiker, is het handiger als er elementen gebruikt worden uit de HTML-standaard. Het scheelt namelijk veel als er standaarden gebruikt worden, in plaats van elementen met classes die door de auteur zelf verzonnen zijn, en die voor elke site weer verschillen. Zo kunnen gebruikers zelf bepalen hoe zij bepaalde elementen willen zien.

Meer lezen

• HTML 4.01 Specificatie over op inhoud gebaseerde stijl elementen
• HTML 4.01 Specificatie over quotatie elementen
• HTML is not an acronym... (evolt.org)

• Home
• Artikelen
• Colofon