<abbr>: Das Abkürzungselement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <abbr>-HTML-Element repräsentiert eine Abkürzung oder ein Akronym.

Wenn Sie eine Abkürzung oder ein Akronym einbinden, geben Sie bei der ersten Verwendung eine volle Entfaltung des Begriffs im Klartext an und markieren Sie die Abkürzung mit <abbr>. Dies informiert den Benutzer, was die Abkürzung oder das Akronym bedeutet.

Das optionale title-Attribut kann eine Erweiterung für die Abkürzung oder das Akronym bereitstellen, wenn keine vollständige Entfaltung vorhanden ist. Dies gibt Benutzeragenten einen Hinweis darauf, wie der Inhalt angekündigt/angezeigt werden soll, während alle Benutzer über die Bedeutung der Abkürzung informiert werden. Wenn vorhanden, muss title diese vollständige Beschreibung und sonst nichts enthalten.

Probieren Sie es aus

<p> You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your <abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you can keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr> content layer separate. This is called "separation of concerns." </p> 
abbr { font-style: italic; color: chocolate; } 

Attribute

Dieses Element unterstützt nur die globalen Attribute. Das title-Attribut hat eine spezifische semantische Bedeutung, wenn es mit dem <abbr>-Element verwendet wird; es muss eine vollständige menschenlesbare Beschreibung oder Entfaltung der Abkürzung enthalten. Dieser Text wird oft von Browsern als Tooltip dargestellt, wenn der Mauszeiger über das Element gehalten wird.

Jedes von Ihnen verwendete <abbr>-Element ist unabhängig von allen anderen; das Bereitstellen eines title für eines fügt nicht automatisch denselben Erweiterungstext zu anderen mit dem gleichen Inhaltstext hinzu.

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:

  • Wenn eine Abkürzung verwendet wird und Sie eine Entfaltung oder Definition außerhalb des Inhaltsflusses des Dokuments bereitstellen möchten, verwenden Sie <abbr> mit einem passenden title.
  • Um eine Abkürzung zu definieren, die dem Leser möglicherweise unbekannt ist, präsentieren Sie den Begriff mit <abbr> und einem Inline-Text, der die Definition liefert. Fügen Sie nur dann ein title-Attribut hinzu, wenn die Inline-Erweiterung oder -Definition nicht verfügbar ist.
  • Wenn das Vorhandensein einer Abkürzung im Text semantisch vermerkt werden muss, ist das <abbr>-Element nützlich. Dies kann wiederum für Stil- oder Skriptingzwecke verwendet werden.
  • Sie können <abbr> in Verbindung mit <dfn> verwenden, um Definitionen für Begriffe festzulegen, die Abkürzungen oder Akronyme sind. Siehe das Beispiel Eine Abkürzung definieren unten.

Grammatikalische Überlegungen

In Sprachen mit grammatikalischer Zahl (das heißt, Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst), verwenden Sie in Ihrem title-Attribut dieselbe grammatikalische Zahl wie im <abbr>-Element. Dies ist besonders wichtig in Sprachen mit mehr als zwei Zahlen, wie Arabisch, aber auch im Englischen relevant.

Standard-Styling

Der Zweck dieses Elements liegt rein im Komfort des Autors und alle Browser stellen es standardmäßig inline (display: inline) dar, obwohl sein Standard-Styling von einem Browser zum anderen variiert:

Einige Browser fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu. Andere fügen eine gepunktete Unterstreichung hinzu, während der Inhalt in Kapitälchen umgewandelt wird. Andere stylen ihn möglicherweise nicht anders als ein <span>-Element. Um dieses Styling zu kontrollieren, verwenden Sie text-decoration und font-variant.

Barrierefreiheit

Das Ausschreiben des Akronyms oder der Abkürzung in voller Länge beim ersten Mal, dass es auf einer Seite verwendet wird, ist hilfreich, um den Menschen das Verständnis zu erleichtern, insbesondere wenn der Inhalt technisch ist oder Fachjargon enthält.

Fügen Sie nur dann ein title hinzu, wenn es nicht möglich ist, die Abkürzung oder das Akronym im Text zu erweitern. Ein Unterschied zwischen dem angekündigten Wort oder Satz und dem, was auf dem Bildschirm angezeigt wird, kann besonders irritierend sein, insbesondere wenn es sich um technischen Fachjargon handelt, den der Leser möglicherweise nicht kennt.

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

Dies ist besonders hilfreich für Menschen, die mit der besprochenen Terminologie oder den behandelten Konzepten nicht vertraut sind, Menschen, die neu in der Sprache sind, und Menschen mit kognitiven Problemen.

Beispiele

Semantisches Markieren einer Abkürzung

Um eine Abkürzung zu kennzeichnen, ohne eine Entfaltung oder Beschreibung bereitzustellen, verwenden Sie <abbr> ohne Attribute, wie in diesem Beispiel gezeigt.

HTML

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

Ergebnis

Abkürzungen stylen

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

HTML

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

CSS

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

Ergebnis

Bereitstellung einer Erweiterung

Das Hinzufügen eines title-Attributs ermöglicht es Ihnen, eine Erweiterung oder Definition für die Abkürzung oder das Akronym bereitzustellen.

HTML

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

Ergebnis

Definieren einer Abkürzung

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

HTML

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

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, Phraseninhalt, erfassbarer Inhalt
Erlaubter Inhalt Phraseninhalt
Tag-Auslassung Keine, sowohl das öffnende als auch das schließende Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phraseninhalt akzeptiert
Implizite ARIA-Rolle Keine entsprechende Rolle
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-abbr-element

Browser-Kompatibilität

Siehe auch