W3docs
de
Anmelden

HTML <abbr>-Tag

Das HTML <abbr>-Tag definiert eine Abkürzung oder ein Akronym wie "HTML", "Mr.", "Dez.", "ASAP", "ATM". Beispiele ausprobieren! Lerne mit W3Docs!

Das HTML-Tag <abbr> kennzeichnet eine Abkürzung oder ein Akronym — eine verkürzte Form eines Wortes oder einer Phrase, wie HTML, CSS, Mr., Dez., ASAP oder ATM. Indem die Kurzform in <abbr> eingeschlossen und ihre vollständige Bedeutung über das title-Attribut angegeben wird, verwandelt sich eine bedeutungslose Buchstabenfolge in selbstbeschreibenden, maschinenlesbaren Inhalt.

Diese Seite erklärt, wofür <abbr> gedacht ist, warum es für Barrierefreiheit und SEO wichtig ist, wie sich das title-Attribut verhält (und wo es an seine Grenzen stößt), sowie die Best Practices für die korrekte Verwendung.

Warum <abbr> wichtig ist

Visuell bewirkt <abbr> nur wenig — manche Browser zeigen allenfalls eine schwache gepunktete Unterstreichung. Sein eigentlicher Wert liegt in der Semantik: Es teilt Software — nicht nur sehenden Lesern — mit, dass ein Textstück eine Abkürzung ist und wofür sie steht.

  • Screenreader. Hilfstechnologien können die Erklärung aus dem title-Attribut vorlesen oder die Abkürzung entsprechend den Benutzereinstellungen aussprechen. Das hilft Menschen, die keine Hover-Tooltips sehen können, Akronyme wie WCAG oder ARIA zu verstehen.
  • Suchmaschinen und andere Tools. Das Auszeichnen von Abkürzungen liefert Crawlern, Übersetzungstools und Indizierern zusätzlichen Kontext darüber, was die verkürzten Begriffe tatsächlich bedeuten.
  • Nicht-Muttersprachler und neue Leser. Ein Leser, der ASAP oder ein fachspezifisches Akronym nicht kennt, erhält die vollständige Bedeutung, anstatt raten zu müssen.

Kurz gesagt: Ein einfaches HTML ist nur vier Buchstaben; <abbr title="HyperText Markup Language">HTML</abbr> sind vier Buchstaben plus ihre Bedeutung — verfügbar für Menschen und Maschinen gleichermaßen.

Syntax

Das <abbr>-Tag wird als Paar verwendet. Der Inhalt wird zwischen dem öffnenden (<abbr>) und dem schließenden (</abbr>) Tag geschrieben.

Beispiel des HTML-Tags <abbr>:

HTML <abbr>-Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a specific way of designating an individual resource address on the Internet </p>
  </body>
</html>
Probier es selbst »
Result

Das title-Attribut

Das <abbr>-Tag hat keine Pflichtattribute, aber das title-Attribut macht es erst nützlich. Trage die vollständige, ausgeschriebene Form der Abkürzung in title ein:

<p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for web pages.</p>

In Desktop-Browsern zeigt das Überfahren der Abkürzung mit der Maus die Erklärung als Tooltip. Screenreader können den title-Wert ebenfalls den Nutzern zugänglich machen.

Einschränkungen von title

Der title-Tooltip ist praktisch, aber du solltest dich nicht allein darauf verlassen, dass Nutzer die Erklärung auf diesem Weg entdecken:

  • Er erscheint nur beim Hover mit der Maus. Touchscreen-Nutzer (Smartphones, Tablets) und Nutzer, die ausschließlich die Tastatur verwenden, können ihn in der Regel nicht auslösen.
  • Die Darstellung ist bei verschiedenen Screenreadern inkonsistent und eine Ausgabe ist nicht garantiert.

Aus diesem Grund empfehlen die Web Content Accessibility Guidelines (WCAG-Erfolgskriterium 3.1.4 Abkürzungen), die Abkürzung auch beim ersten Auftreten im sichtbaren Text auszuschreiben und danach die Kurzform zu verwenden:

<p>
  The <abbr title="World Wide Web Consortium">W3C</abbr> (World Wide Web
  Consortium) develops web standards. The W3C also maintains the HTML
  specification.
</p>

Auf diese Weise ist die Bedeutung für alle zugänglich — nicht nur für Nutzer, die hovern können.

Attribute

Das <abbr>-Tag unterstützt die Globalen Attribute und die Event-Attribute. Das wichtigste davon ist das globale title-Attribut, das oben beschrieben wird.

Wie man ein HTML-<abbr>-Tag gestaltet

Standardmäßig zeigen manche Browser eine gepunktete Unterstreichung unter <abbr>-Inhalten an, aber die Darstellung ist nicht einheitlich — ältere Versionen mancher Browser zeigten beispielsweise gar keine Unterstreichung. Um ein zuverlässiges, vorhersehbares Aussehen zu erzielen, gestalte es selbst mit CSS. Ein gängiges Muster ist ein gepunkteter unterer Rahmen zusammen mit einem help-Cursor, der andeutet, dass beim Hovern mehr angezeigt wird:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      abbr {
        text-decoration: none;
        border-bottom: 1px dotted #000;
        cursor: help;
      }
    </style>
  </head>
  <body>
    <p><abbr title="HyperText Markup Language">HTML</abbr> is the standard markup language for documents designed to be displayed in a web browser.</p>
  </body>
</html>
Result

Wann <abbr> verwendet werden sollte und Best Practices

Verwende <abbr> immer dann, wenn eine Kurzform nicht von jedem Leser verstanden werden könnte — insbesondere beim ersten Auftreten in deinem Inhalt.

  • Gib immer einen title mit der vollständigen Erklärung an. Ein <abbr> ohne title hat wenig Mehrwert.
  • Schreibe den Begriff beim ersten Auftreten im sichtbaren Text aus (WCAG 3.1.4) und verwende danach die Abkürzung. Mache den title-Tooltip nicht zur einzigen Quelle der Bedeutung.
  • Beschränke den title auf die Erklärung — schreibe World Wide Web Consortium, keine vollständige Erklärung in Satzform.
  • Nicht übertreiben. Du musst nicht jedes Vorkommen einer bekannten Abkürzung auf einer Seite auszeichnen; das erste Vorkommen zu markieren reicht in der Regel aus.
  • Auch für Akronyme verwenden. Modernes HTML hat kein separates Akronym-Element — <abbr> deckt sowohl Abkürzungen als auch Akronyme ab.

Browser-Unterstützung

Das <abbr>-Element wird von allen modernen Browsern unterstützt. Beachte, dass die Standarddarstellung variiert: Manche Browser zeigen eine gepunktete Unterstreichung, andere zeigen nichts Sichtbares. Wenn ein einheitlicher visueller Hinweis wichtig ist, wende wie oben gezeigt eigenes CSS an, anstatt dich auf den Browser-Standard zu verlassen.

Verwandte Elemente

  • <acronym> — das veraltete Element für Akronyme; verwende stattdessen <abbr>.
  • <dfn> — kennzeichnet die definierende Stelle eines Begriffs.
  • <cite> — referenziert den Titel eines kreativen Werks.

Übung

Übung
Was ist die Funktion des <abbr>-Tags in HTML?
Was ist die Funktion des <abbr>-Tags in HTML?
Was this page helpful?