CSS, HTML und Javascript mit {stil}

HTML abbr – Abkürzung und Akronym

HTML abbr Tag: LOL ist Acronym und Abbreviation von Lough out loud

abbr kennzeichnet einen Text als Abkürzung eines längeren Wortes oder Ausdrucks oder Acronyms. 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.

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 Inlineelement, d.h., es führt nicht zu einem Zeilenvorschub und kann in jedem Block- und Inline-Element stehen.

W3C ist eine Abkürzung.

<abbr title="World Wide Web Consortium">W3C</abbr> ist eine Abkürzung.      

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 ist. Das ist keinesfalls ein Manko, sondern ein kleiner Schritt nach vorn: Mit HTML5 soll HTML für die Struktur und nicht mehr für die Darstellung verantwortlich sein. Inzwischen hat Safari eingelenkt und unterstreicht den Text in abbr mit der gestrichelten Linie.

Eine zuverlässige Kennzeichnung gibt es nur durch eine CSS-Eigenschaft für das abbr-Tag.

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 HTML5 ist nur noch abbr, nicht aber mehr das acronym-Tag vertreten. Wunderbar – der Unterschied war immer nur ein Spielplatz für Pendanten.

Am Rande