mitmario.dev

<abbr>

Das <abbr>-Element kennzeichnet eine Abkürzung oder ein Akronym im Text. Über das title-Attribut kannst du die ausgeschriebene Form angeben. Browser zeigen diese dann als Tooltip an, wenn der Nutzer mit der Maus darüberfährt. Das ist besonders hilfreich, wenn du Fachbegriffe verwendest, die nicht alle Leser kennen. Ohne title-Attribut ist <abbr> trotzdem sinnvoll: Es macht die Abkürzung für Suchmaschinen und assistive Technologien als solche erkennbar. Auf dieser Seite lernst du, wann <abbr> die richtige Wahl ist, wie du es mit <dfn> kombinierst und worauf du bei der Barrierefreiheit achten solltest.

Steckbrief <abbr>
Kategorie
Text & Typografie
Art
Inline
Attribute
1
Beispiele
3
Browser
5 von 5
E-Mail
1 von 5
Stand
04.02.2026

Grundlagen

Abkürzungen sind im Web allgegenwärtig: HTML, CSS, API, URL, SEO. Für erfahrene Entwickler sind sie selbstverständlich, für Einsteiger oft ein Rätsel. Mit <abbr> machst du Abkürzungen verständlicher, ohne den Lesefluss zu stören.

  • <abbr> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
  • Browser stellen <abbr> oft mit einer gepunkteten Unterstreichung dar (variiert je nach Browser und CSS)
  • Das title-Attribut enthält die ausgeschriebene Form der Abkürzung (Browser zeigen sie als Tooltip beim Hover)
  • Ohne title-Attribut bleibt <abbr> semantisch sinnvoll, aber bietet keinen sichtbaren Mehrwert für den Nutzer
  • <abbr> ist nicht dasselbe wie <dfn>: <dfn> kennzeichnet einen Begriff, der an dieser Stelle definiert wird. Du kannst beide kombinieren: <dfn><abbr title="...">...</abbr></dfn> für “Hier wird diese Abkürzung definiert”
  • Die ausgeschriebene Form muss bei der ersten Verwendung angegeben werden. Bei weiteren Vorkommen im Text kannst du das title-Attribut weglassen

Syntax

index.html
Grundsyntax
<p>Webseiten werden mit <abbr title="Hypertext Markup Language">HTML</abbr> erstellt.</p>

Attribute

1 Attribut
Attribut und Beispiel Beschreibung
title String
title="Hypertext Markup Language"
Die ausgeschriebene Form der Abkürzung. Browser zeigen den Wert als Tooltip beim Hover an. Bei abbr hat das title-Attribut eine spezielle Bedeutung: Es darf ausschließlich die vollständige Erklärung der Abkürzung enthalten.

Beispiele

3 Beispiele

Der häufigste Anwendungsfall: Fachbegriffe und Abkürzungen im Text erklären, ohne den Lesefluss zu stören. Der Tooltip erscheint beim Hover:

index.html
Abkürzungen im Fließtext
<p>
  Das <abbr title="World Wide Web Consortium">W3C</abbr> entwickelt
  Webstandards wie <abbr title="Hypertext Markup Language">HTML</abbr>
  und <abbr title="Cascading Style Sheets">CSS</abbr>.
</p>
<p>
  Die Daten werden über eine
  <abbr title="Application Programming Interface">API</abbr> abgerufen.
</p>

Barrierefreiheit

4 Punkte
  • Screenreader-Verhalten: Manche Screenreader lesen den title-Inhalt vor, andere nicht. NVDA und JAWS können so konfiguriert werden, dass sie das title-Attribut ansagen. Darauf allein solltest du dich aber nicht verlassen.
  • Erstes Vorkommen ausschreiben: Die zuverlässigste Methode ist, die Abkürzung beim ersten Vorkommen im Text auszuschreiben: “Hypertext Markup Language (HTML)”. Das hilft allen Nutzern, nicht nur denen mit Maus (für den Tooltip).
  • Tooltip-Probleme auf Touch-Geräten: Auf Smartphones und Tablets gibt es keinen Hover-Effekt. Der Tooltip des title-Attributs ist dort nicht zugänglich. Deshalb ist die ausgeschriebene Form im Text die bessere Lösung.
  • Konsistenz: Wenn du <abbr> mit title verwendest, mache es beim ersten Vorkommen im Textabschnitt. Wiederholungen im selben Absatz sind nicht nötig und können den Lesefluss stören.

Häufige Fehler

3 Punkte

  • title-Attribut vergessen: <abbr>HTML</abbr> ohne title ist semantisch korrekt, aber bietet dem Nutzer keinen Mehrwert. Wenn du eine Abkürzung erklären willst, vergiss das title-Attribut nicht. Bei allgemein bekannten Abkürzungen ist es optional.

  • title für andere Inhalte als die Langform verwenden: Das title-Attribut bei <abbr> ist ausschließlich für die ausgeschriebene Form gedacht. Schreibe nicht title="Wird für Webseiten verwendet", sondern title="Hypertext Markup Language".

  • abbr mit Punkt-Abkürzungen verwechseln: <abbr> ist für Akronyme und Initialwörter (HTML, CSS, API). Für gewöhnliche Abkürzungen wie “z.B.” oder “etc.” ist <abbr> zwar erlaubt, aber in der Praxis selten nötig.

Browser-Kompatibilität

5 von 5

Das abbr-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

1 von 5

Die Unterstützung von abbr in Email-Clients ist eingeschränkt. Die meisten Clients entfernen das title-Attribut oder zeigen keinen Tooltip.

  • Apple Mail

    Teilweise

    Das Element wird gerendert, aber der Tooltip des title-Attributs wird nicht immer angezeigt

  • Gmail

    Keine

    Gmail entfernt das abbr-Element und seine Attribute. Schreibe die Langform direkt in den Text

  • Outlook

    Keine

    Outlook ignoriert das abbr-Element. Die gepunktete Unterstreichung wird nicht dargestellt

  • Thunderbird

    Komplett

  • Yahoo Mail

    Keine

    Yahoo Mail entfernt abbr und seine Attribute

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.