<abbr>

Zuletzt aktualisiert am 4. Februar 2026

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.

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> — “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

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

Attribute

Beispiele

Abkürzungen im Fließtext

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

<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>

Kombination mit dfn

Wenn du eine Abkürzung zum ersten Mal in einem Text einführst und gleichzeitig definierst, kombinierst du <dfn> und <abbr>. Das sagt: “Hier wird diese Abkürzung definiert”:

<!-- Erste Verwendung: Definition + Abkürzung -->
<p>
  <dfn><abbr title="Search Engine Optimization">SEO</abbr></dfn>
  bezeichnet die Optimierung von Webseiten für Suchmaschinen.
</p>

<!-- Weitere Verwendung: nur noch abbr (oder Klartext) -->
<p>Gutes SEO sorgt dafür, dass deine Seite bei Google gefunden wird.</p>

Abkürzungen ohne title

Nicht jede Abkürzung braucht ein title-Attribut. Bei allgemein bekannten Abkürzungen ist die Auszeichnung trotzdem sinnvoll, weil sie die Abkürzung semantisch kennzeichnet:

<!-- Allgemein bekannte Abkürzungen: title optional -->
<p>Die <abbr>EU</abbr> hat neue Datenschutzrichtlinien verabschiedet.</p>
<p>Bitte sende mir eine <abbr>E-Mail</abbr> mit den Details.</p>

Barrierefreiheit

• 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

• 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

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

Email-Kompatibilität

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

Verwandte Elemente