Abbr, Acronym Tags en CSS

Met de acronym en abbr tags kun je via het title attribuut een nadere verklaring geven voor acroniemen en afkortingen. Helaas zie je meestal niets aan de woorden op de pagina dat er meer informatie beschikbaar is over de term/afkorting, zodat je bezoekers van de informatie verstoken zullen blijven.

Twee voorbeelden om dit te illustreren:

1. Acronym tag: WYSIWYG

De HTML code hiervoor is:
<acronym title="What You See Is What You Get">WYSIWYG</acronym>

Als je met de muis op "WYSIWYG" hierboven gaat staan, dan zie je waarschijnlijk een venster verschijnen met daarin een nadere verklaring van het acroniem.

Het probleem is hier dat je aan de term niet kunt zien dat er meer informatie beschikbaar is als je er met de muis op gaat staan. Als je het acroniem in een pagina zet tussen alle andere tekst, dan zal niemand op het idee komen om de muis er op te zetten. Dit gaan we zo dadelijk oplossen met behulp van Cascading Style Sheets (CSS). Hier zie je al wel dat er meer informatie beschikbaar is door de gestippelde lijn, omdat ik de oplossing al in de style sheet van Homepage-Maken heb opgenomen.

De acronym tag wordt ondersteund door Internet Explorer (IE) 4.0 en hoger en door Netscape 6.2 .

2. Abbr tag: HTML

De HTML code voor deze abbr tag is:
<abbr title="HyperText Markup Language">HTML</abbr>

Als je Internet Explorer hebt dan zul je niets zien als je hierboven met de muis op "HTML" gaat staan. IE ondersteunt namelijk niet de abbr tag. De tag wordt wel ondersteund door Netscape 6.2 . Het probleem is hier hetzelfde als bij de acronym tag: de bezoeker kan niet zien dat er extra informatie beschikbaar is.

De Oplossing met CSS

We willen dus aan de bezoekers duidelijk maken dat er een nadere uitleg wordt gegeven als men met de muis op de afkorting of het acroniem gaan staan. Dit kunnen we bereiken met Cascading Style Sheets.

We gaan de acronym en abbr tags onderstrepen en we veranderen de cursor in een vraagteken, zodat men weet dat er verklarende informatie wordt gegeven. Daarnaast maken we een class aan (genaamd "verklaring") waardoor we ook andere woorden kunnen verklaren met behulp van de span tag.

We gebruiken hier een stippellijn als onderstreping, zodat het woord niet op een link lijkt en de bezoeker niet in verwarring raakt.

We bereiken dit alles met de volgende CSS code:

abbr, acronym, .verklaring {
border-bottom: 1px dotted #000;
cursor: help;
}

Goed, laten we nu eens kijken hoe het er uit komt te zien op het scherm.

Resultaat bij de acronym tag:

WYSIWYG

Je gebruikt de volgende HTML code in je pagina:

<acronym title="What You See Is What You Get">WYSIWYG</acronym>

Resultaat bij de abbr tag:

HTML

De HTML code wordt hier dus:

<abbr title="HyperText Markup Language">HTML</abbr>

Zoals al gezegd werkt de abbr tag niet in Internet Explorer browsers!

Resultaat bij het gebruik van de .verklaring class:

Moeilijk woord

De HTML code die je voor deze class moet gebruiken is:

<span class="verklaring" title="De verklaring van het moeilijke woord...">Moeilijk woord</span>

Slot

Je ziet dat je je bezoekers een plezier kunt doen door het gebruik van de abbr, acronym en span tags te combineren met CSS. Je kunt bezoekers nu extra informatie geven over afkortingen, acroniemen en andere moeilijke woorden of termen en de bezoekers kunnen nu ook zien dat er iets bijzonders aan de hand is met het woord en dat er extra informatie beschikbaar is. Voor beide partijen een prima oplossing dus.

P.S. Maak wel correct gebruik van de tags. Gebruik dus de abbr en acronym tags alleen voor afkortingen en acroniemen. Wil je een ander woord verklaren, doe dat dan met een class in combinatie met de span tag, zoals hierboven beschreven.

Homepage-Maken Tip