Over <abbr> en <acronym>

In elke tekst komen afkortingen voor. Voor iemand die een tekst leest hoeft dat geen probleem te zijn, mits de lezer weet wat de afkorting betekent. Zoekmachines hebben vaker moeite met afkortingen, zeker als die afkortingen alleen worden gebruikt binnen een bepaald vakgebied, dus bij een jargon horen.

Met behulp van de tag <abbr> ("afkorting") kun je zowel de bezoekers van je site als de zoekmachines een handje helpen.
Opmerking: In HTML5 bestaat <acronym> niet meer. Je gebruikt daar altijd <abbr>. In sites die in HTML 4 zijn geschreven kun je <acronym> nog tegenkomen.

Het onderscheid tussen gewone afkortingen en acronymen is:

• Een afkorting is een rijtje letters, al of niet gescheiden door punten. Je spreek het letter-voor-letter uit, bijvoorbeeld NCRV, VPRO of a.u.b.
  Hiervoor gebruikt HTML 4 de tag <abbr>, afgeleid van het Engelse woord voor afkorting: abbreviation.
• Een acronym is een afkorting die je als woord kunt uitspreken, bijvoorbeeld AVRO of VARA. De HTML 4-tag is <acronym>.

Met behulp van spraaksynthese software kunnen webpagina's worden 'voorgelezen', ten dienste van o.a. blinden en slechtzienden. Dit soort software behandelt <abbr> en <acronym> als identiek. Als je NCRV markeert als afkorting (dus met punten ertussen: N.C.R.V.) worden de letters apart gespeld krijg je een vreemd uitgesproken 'woord'. .

Zoekmachines hebben een vergelijkbare problemen met afkortingen. Want is AVRO nu een woord of een afkorting? (Avro was ooit ook de naam van een Engelse fabrikant van vliegtuigen.)

Het onderscheid tussen <abbr> en <acronym> is dus vaag. Dat maakt dat je zorg moet besteden aan de toepassing er van. Je kunt EO bijvoorbeeld beschouwen als afkorting, maar ook als acronym, terwijl e.o. duidelijk een afkorting is. Maar hoe zit het met NOS?

In HTML 4 wordt <acronym> afgeraden. In HTML5 is <acronym> helemaal vervallen.
In HTML5 gebruik je alleen nog <abbr>.

De code ziet er als volgt uit:

• <abbr> Hier de afkorting </abbr>
• <acronym> Hier de acronym </acronym>

Beide tags kun je voorzien van een title-attribuut. Daar kun je de betekenis van de afkorting kwijt. Veel browsers geven de title weer als tooltip (afhankelijk van instellingen; er zijn browsers waar je dit kunt uit zetten).
Een andere mogelijkheid is om met behulp van onmouseover en JavaScript een tooltip op het scherm te laten verschijnen. Zie bijvoorbeeld het item "Tooltips in JavaScript".

Als je een afkorting in je document markeert met <abbr> of <acronym>, is het handig voor de lezer als die kan zien dat het een afkorting is en dat er 'iets onder zit'. Je moet de inhoud van de tag dus een afwijkende opmaak geven. Op deze bladzijde zijn de afkortingen groen gekleurd en zijn ze onderstreept met een stippellijn. Dat doe je met behulp van een style-block of -sheet. Op deze bladzijde is gebruikt:

abbr { color:#006600; border-bottom:1px dotted #006600 }

(De kleur #006600 is donker groen.) Je kunt hier natuurlijk ook een class of id voor inzetten.