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.