Het element <abbr>

Attributen

Dit element ondersteunt alleen de globale attributen. Het title-attribuut heeft een specifieke semantische betekenis wanneer het wordt gebruikt met het <abbr>-element; het moet een volledige, voor mensen leesbare beschrijving of uitleg van de afkorting bevatten. Deze tekst wordt door browsers vaak weergegeven als tooltip wanneer de muiscursor over het element zweeft.

Elk <abbr>-element dat u gebruikt, staat los van alle andere; het opgeven van een title voor het ene koppelt niet automatisch dezelfde uitlegtekst aan andere elementen met dezelfde inhoudstekst.

Gebruiksnotities

Typische gebruiksscenario's

Het is zeker niet vereist dat alle afkortingen worden opgemaakt met <abbr>. Er zijn echter een paar gevallen waarin het nuttig is om dit wel te doen:

• Wanneer een afkorting wordt gebruikt en u een uitleg of definitie wilt bieden buiten de doorlopende tekst van de inhoud van het document, gebruik dan <abbr> met een geschikt title.
• Om een afkorting te definiëren die de lezer mogelijk niet kent, presenteert u de term met <abbr> en inline tekst die de definitie geeft. Neem alleen een title-attribuut op wanneer de inline uitleg of definitie niet beschikbaar is.
• Wanneer de aanwezigheid van een afkorting in de tekst semantisch aangeduid moet worden, is het <abbr>-element nuttig. Dit kan op zijn beurt gebruikt worden voor styling- of scriptingdoeleinden.
• U kunt <abbr> samen met <dfn> gebruiken om definities vast te stellen voor termen die afkortingen of acroniemen zijn. Zie het voorbeeld Een afkorting definiëren hieronder.

Overwegingen met betrekking tot grammatica

In talen met grammaticaal getal (dat wil zeggen talen waarin het aantal items de grammatica van een zin beïnvloedt), gebruikt u hetzelfde grammaticale getal in uw title-attribuut als binnen uw <abbr>-element. Dit is vooral belangrijk in talen met meer dan twee getallen, zoals het Arabisch, maar is ook relevant in het Engels.

Standaardstyling

Het doel van dit element is puur voor het gemak van de auteur, en alle browsers geven het standaard inline weer (display: inline), hoewel de standaardstyling van browser tot browser verschilt:

Sommige browsers voegen een gestippelde onderstreping toe aan de inhoud van het element. Andere voegen een gestippelde onderstreping toe terwijl de inhoud wordt omgezet naar kapitalen (small caps). Weer andere stylen het mogelijk niet anders dan een <span>-element. Om deze styling te beheren, gebruikt u text-decoration en font-variant.

Toegankelijkheid

Het volledig uitschrijven van het acroniem of de afkorting bij het eerste gebruik op een pagina is nuttig om mensen te helpen het te begrijpen, vooral als de inhoud technisch of vakjargon is.

Neem alleen een title op als het uitschrijven van de afkorting of het acroniem in de tekst niet mogelijk is. Een verschil tussen het aangekondigde woord of de aangekondigde zin en wat op het scherm wordt weergegeven, kan ontwrichtend zijn, vooral als het gaat om technisch jargon waarmee de lezer mogelijk niet bekend is.

<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight
  data-interchange format.
</p>

Dit is vooral nuttig voor mensen die niet bekend zijn met de terminologie of concepten die in de inhoud besproken worden, mensen die nieuw zijn in de taal, en mensen met cognitieve beperkingen.

Voorbeelden

Een afkorting semantisch opmaken

Om een afkorting op te maken zonder een uitleg of beschrijving te geven, gebruikt u <abbr> zonder attributen, zoals te zien is in dit voorbeeld.

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

Resultaat

Afkortingen stylen

U kunt CSS gebruiken om een aangepaste stijl in te stellen voor afkortingen, zoals te zien in dit eenvoudige voorbeeld.

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Resultaat

Een uitleg bieden

Het toevoegen van een title-attribuut stelt u in staat een uitleg of definitie voor de afkorting of het acroniem te geven.

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

Resultaat

Een afkorting definiëren

U kunt <abbr> samen met <dfn> gebruiken om een afkorting formeler te definiëren, zoals hier wordt getoond.

HTML

<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr>spec</abbr>) is a document that
  outlines in detail how a technology or API is intended to function and how it
  is accessed.
</p>

Resultaat

Technische samenvatting