HTML abbr – Abkürzung und Akronym

HTML abbr – Abkürzung (Acronym und Abbreviation)

abbr kennzeichnet einen Text als Abkürzung eines längeren Wortes oder Ausdrucks oder Akronyms (Abkürzung aus den Anfangsbuchstaben). Die Browser stellen Text in abbr durch eine gestrichelte Linie unter dem Text heraus und machen die Erklärung mit einer kleinen Verzögerung beim Hovern mit der Maus sichtbar.

Abkürzungen sind sinnvoll für den Besucher: Wer will schon dauernd Cascading Style Sheets statt einfach CSS lesen? Die Erklärung einer Abkürzung bringt zusätzliche Informationen für Browser, Übersetzungen und auch für die Suchmaschinen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

abbr – abbreviation – Kürzel

Die meisten Browser markieren den Text innerhalb eines abbr-Tags durch einen Unterstrich, aber eine zuverlässige Kennzeichnung gibt es nur durch eine CSS-Eigenschaft für abbr.

HTML abbr ist ein Phrase-Tag (Inlineelement), d.h., es führt nicht zu einem Zeilenvorschub und kann in jedem Block- und Inline-Element stehen. Phrase-Tags wie code und cite umschließen eine oder mehrere Wörter innerhalb eines Satzes.

W3C ist eine Abkürzung.

Wer weiß schon, was JPG (auch JPEG) bedeutet?

<abbr title="World Wide Web Consortium">W3C</abbr> ist eine Abkürzung. 
<abbr title="Joint Photographic Experts Group">JPG</abbr>     

Beim Hovern mit der Maus soll der Browser einen Tooltip zeigen – d.h., hier besteht nur ein eingeschränkter Zugriff, denn Benutzern ohne Maus oder mit Sprachausgabe wird die Bedeutung nicht angezeigt.

Einige Browser kennzeichnen einen von abbr eingeschlossenen Begriff durch eine Unterstreichung. Firefox gibt dem Inhalt eines <abbr>- bzw. <acronym>-Tags seit Version 2 einen eigenen Stil mit einer feinen gepunkteten Linie, so dass Tooltips im Text leicht hervorgehoben werden.

abbr: Ohne CSS kein Verlass

Safari und Chrome haben das abbr-Tag von jeher nicht gekennzeichnet, so dass es ohne weitere CSS-Eigenschaften nicht zu erkennen war. Das war keinesfalls ein Manko: HTML ist für die Struktur und nicht für die Darstellung verantwortlich. Inzwischen hat Safari eingelenkt und unterstreicht den Text in abbr mit der gestrichelten Linie.

Eine zuverlässige Kennzeichnung gibt es nur durch CSS für das abbr-Tag: abbr { border-bottom: 1px dotted gray }

abbr[title] {border-bottom: 1px dotted}

HTML abbr mobile

Auf den mobilen Geräte gibt es kein Hovern. Eine Abkürzung aus drei Buchstaben mit einem Touch zu erwischen geht an die Grenzen der Feinmotorik.

Zeigen wir die Erklärung aus dem title-Attribut auf einem Touch Device und im Print direkt an:

abbr[title]:after {content: " (" attr(title) ") "}

@media (min-width:1160px) {
   abbr[title] {border-bottom: 1px dotted }
   abbr[title]:after {content: "" }
}

abbr vs acronym

acronym und abbr waren von je her fast gleichbedeutend, sichtbare Unterschiede gab es nicht. Ein Akronym (Radar, JPEG [ˈdʒeɪpɛɡ], LOL ) kann man als Wort aussprechen, Abkürzungen (JPG, IBM, ZDF, USA) werden als einzelne Buchstaben ausgesprochen.

RADAR ist ein Akronym für RAdio Detection And Ranging.

IP ist die Abkürzung von Internet Protocol

In HTML ist nur noch abbr, nicht aber mehr das veraltete acronym-Element vertreten. Wunderbar – der Unterschied war immer nur ein Spielplatz für Pendanten.