HTML Element abbr

Fremdwörter und Abkürzungen sind eine Plage für die, die sich in dem Fachgebiet nicht auskennen. Um das Lesen und Verstehen von Online Texten einfacher zu gestalten, gibt es das HTML Tag abbr , das alle modernen Browser interpretieren können. Das Tag abbr ist ein Inlineelement, d.h. es führt nicht zu einem Zeilen-Umbruch und kann in jedem Block- und Inline-Element stehen.

Beim „überfahren“ des entsprechenden Begriffs mit der Maus soll der Browser einen Tooltip zeigen. Einige Browser kennzeichnen einen von abbr eingeschlossenen Begriff durch eine Unterstreichung. So Firefox, nicht aber Safari. Abhilfe schafft hier eine kurze und einfache CSS Deklaration:

 abbr  {
   border-bottom: 1px dotted red;
   cursor: help;
 }

Das ist auch kein Manko, sondern weiterer Schritt nach vorn, denn mit HTML5 wurde großer Wert auf das allgemeine Credo gelegt, das HTML für die Struktur, und CSS für die Darstellung verantwortlich ist.

Unter einigen Wörtern dieser Seiten befindet sich eine dunkelrote gepunktete Linie. Fährt die Maus darüber, erscheint eine kurze Erklärung neben dem Mauszeiger. Die Linie ist so gestaltet, dass sie sich deutlich von einem normalen Hyperlink unterscheidet.

Analog zum Link-Element a , wird im title Attribut der entsprechende Text hinterlegt. 

 abbr title="Hypertext Markup Language"

 

Responsive Design

Nun gibt es auf mobilen Geräten keine Maus und erst recht kein „Hover“. Was also tun, damit die Information nicht verloren geht. Auch hier hilft CSS3. Durch die CSS content Eigenschaft (die es erlaubt vor oder nach einem HTML Element Inhalte einzufügen) in Kombination mit der Attribut-Funktion attr, die es erlaubt Werte (hier: Text) aus HTML Elementen auszulesen. Zusammengebaut sieht das notwendige CSS dann so aus:

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

@media screen and (min-width: 1025px){
   abbr[title]
   { border-bottom: 1px dashed #ADADAD;
      cursor:help;}

   abbr[title]:after
   { content: "";}
}

Anmerkung: in früheren HTML Spezifikationen gab das das acronym Tag, das dieselbe Funktionalität bereitstellte. Allerdings war der Name Akronym etwas irreführend, denn Akronyme sind eine Unter-Gruppe der Abkürzungen, von denen sie sich dadurch abgrenzen, das sie sich als „Wort“ aussprechen lassen. HTML ist eine Abkürzung während Laser eine Abkürzung und ein Akronym ist.
Schade ist nur, das es auch mit dieser Technik, nicht auf einfache Weise möglich ist, die wichtigen Buchstaben kenntlich zu machen (z.B. durch Fettdruck).