<abbr>: Das Abkürzungselement

Das HTML-Abkürzungselement (<abbr>) steht für eine Abkürzung oder ein Akronym. Das optionale Attribut title kann eine Erweiterung oder Beschreibung für die Abkürzung bereitstellen. Wenn vorhanden, title diese vollständige Beschreibung und nichts anderes enthalten.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Der Artikel Wie Abkürzungen markiert und verständlich gemacht werden, ist ein Leitfaden zur Verwendung von <abbr> und verwandten Elementen.

Attribute

Dieses Element unterstützt nur die globalen Attribute. Das Attribut title hat bei Verwendung mit dem <abbr>-Element eine bestimmte semantische Bedeutung. Es muss eine vollständige von Menschen lesbare Beschreibung oder Erweiterung der Abkürzung enthalten. Dieser Text wird von Browsern häufig als Tooltip dargestellt, wenn der Mauszeiger über das Element bewegt wird.

Jedes <abbr>-Element, das Sie verwenden, ist unabhängig von allen anderen; wenn Sie title für eines angeben, wird derselbe Erweiterungstext nicht automatisch an ein anderes mit demselben Inhaltstext angehängt.

Nutzungshinweise

Typische Anwendungsfälle

Es ist sicherlich nicht erforderlich, dass alle Abkürzungen mit <abbr> markiert werden. Es gibt jedoch einige Fälle, in denen es hilfreich ist, dies zu tun:

• Wenn eine Abkürzung verwendet wird und Sie eine Erweiterung oder Definition außerhalb des Dokumentenflusses bereitstellen möchten, verwenden Sie <abbr> mit einer entsprechenden title.
• Um eine Abkürzung zu definieren, die dem Leser möglicherweise nicht vertraut ist, legen Sie den Begriff mit <abbr> und entweder einem title-Attribut oder einem Inline-Text vor, der die Definition bereitstellt.
• Wenn die Anwesenheit einer Abkürzung im Text semantisch notiert werden muss, ist das <abbr>-Element hilfreich. Dies kann wiederum für Styling- oder Scripting-Zwecke verwendet werden.
• Sie können <abbr> zusammen mit <dfn> verwenden, um Definitionen für Begriffe festzulegen, die Abkürzungen oder Akronyme sind. Siehe das Beispiel Eine Abkürzung definieren unten.

Überlegungen zur Grammatik

Verwenden Sie in Sprachen mit Numerus (d. h. Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst) die gleiche grammatikalische Nummer in Ihrem title-Attribut wie in Ihrem <abbr>-Element. Dies ist besonders wichtig bei Sprachen mit mehr als zwei Numeri, wie z. B. Arabisch, ist aber auch in Englisch relevant.

Standarddarstellung

Der Zweck dieses Elements ist ausschließlich für den Autor gedacht und wird von allen Browsern standardmäßig inline (display: inline) angezeigt. Die Standardeinstellung ist jedoch von Browser zu Browser unterschiedlich:

• Manche Browser, wie der Internet Explorer, stellen es nicht anders als das <span>-Element dar.
• Opera, Firefox, Chrome und einige andere fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu.
• Einige Browser fügen nicht nur eine gepunktete Unterstreichung hinzu, sondern setzen sie auch in Kapitälchen ein. Um dies zu vermeiden, fügen Sie Ihrem CSS etwas wie font-variant: none hinzu.

Beispiele

Eine Abkürzung semantisch markieren

Um eine Abkürzung zu markieren, ohne eine Erweiterung oder Beschreibung anzugeben, verwenden Sie einfach <abbr> ohne Attribute, wie in diesem Beispiel dargestellt.

HTML

<p>Using <abbr>HTML</abbr> is fun and easy!</p>

Ergebnis

Abkürzungen formatieren

Sie können CSS verwenden, um einen benutzerdefinierten Stil festzulegen, der für Abkürzungen verwendet wird, wie in diesem einfachen Beispiel gezeigt.

HTML

<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>

CSS

abbr {
  font-variant: all-small-caps;
}

Ergebnis

Eine Erweiterung bereitstellen

Durch das Hinzufügen eines Attributs title können Sie eine Erweiterung oder Definition für die Abkürzung oder das Akronym angeben.

HTML

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p>

Ergebnis

Eine Abkürzung definieren

Sie können <abbr> zusammen mit <dfn> verwenden, um eine Abkürzung formal zu definieren, wie hier gezeigt.

HTML

<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> is a markup language used to create the semantics and structure
of a web page.</p>

<p>A <dfn id="spec">Specification</dfn>
(<abbr title="Specification">spec</abbr>) is a document that outlines
in detail how a technology or API is intended to function and how it is
accessed.</p>

Ergebnis

Ausführlichere Beispiele finden Sie im Artikel Wie Abkürzungen markiert und verständlich gemacht werden.

Barrierefreiheit

Wenn Sie das Akronym oder die Abkürzung bei der ersten Verwendung auf einer Seite vollständig ausschreiben, hilft dies den Menschen, sie zu verstehen, insbesondere wenn es sich um technische Inhalte oder um Fachjargon handelt.

Beispiel

<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>

Dies ist besonders hilfreich für Personen, die mit der Terminologie oder den inhaltlichen Begriffen nicht vertraut sind, Personen, die sich mit der Sprache noch nicht auskennen, und Menschen mit kognitiven Hürden.

Spezifikationen

Browserkompatibilität

Siehe auch

• Benutzung des <abbr>-Elements
• Andere Elemente, die Semantik auf Textebene vermitteln: <a>, <em>, <strong>, <small>, <cite>, <q>, <dfn>, <time>, <code>, <var>, <samp>, <kbd>, <sub>, <sup>, <b>, <i>, <mark>, <ruby>, <rp>, <rt>, <bdo>, <span>, <br>, <wbr>.
• Das veraltete Element <acronym>, dessen Verantwortlichkeiten in <abbr> zusammengefasst wurden