<abbr>: Das Abkürzungselement

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 Ausweitung der Abkürzung enthalten. Dieser Text wird oft von Browsern als Tooltip angezeigt, wenn der Mauszeiger über das Element schwebt.

Jedes <abbr>-Element, das Sie verwenden, ist unabhängig von allen anderen; das Bereitstellen eines title für ein Element fügt nicht automatisch denselben Ausweitungstext für andere mit demselben Inhaltstext hinzu.

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

• Wenn eine Abkürzung verwendet wird und Sie eine Ausweitung oder Definition außerhalb des Dokumenteninhalts bereitstellen möchten, verwenden Sie <abbr> mit einem geeigneten title.
• Um eine Abkürzung zu definieren, die dem Leser unbekannt sein könnte, präsentieren Sie den Begriff mit <abbr> und integriertem Text, der die Definition liefert. Fügen Sie ein title Attribut nur hinzu, wenn die integrierte Ausweitung oder Definition nicht verfügbar ist.
• Wenn das Vorhandensein einer Abkürzung im Text semantisch hervorgehoben werden soll, ist das <abbr>-Element nützlich. Dies kann wiederum für Styling- oder Skriptzwecke 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 Definieren einer Abkürzung unten.

In Sprachen mit grammatischem Numerus (d.h. Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst), verwenden Sie denselben grammatischen Numerus in Ihrem title Attribut wie im <abbr> Element. Dies ist besonders wichtig in Sprachen mit mehr als zwei Numeri wie Arabisch, aber auch relevant für Englisch.

Der Zweck dieses Elements dient nur der Bequemlichkeit des Autors, und alle Browser zeigen es standardmäßig inline an (display: inline), obwohl sein Standardstil von einem Browser zum anderen variiert:

Einige Browser fügen den Inhalten des Elements eine gepunktete Unterstreichung hinzu. Andere fügen eine gepunktete Unterstreichung hinzu, während die Inhalte in Kapitälchen umgewandelt werden. Andere stylen es möglicherweise nicht anders als ein <span>-Element. Um diese Stilgebung zu steuern, verwenden Sie text-decoration und font-variant.

Das Ausbuchstabieren des Akronyms oder der Abkürzung bei der ersten Verwendung auf einer Seite ist hilfreich, um Menschen das Verständnis zu erleichtern, insbesondere bei technischem Inhalt oder Branchenjargon.

Fügen Sie nur dann ein title hinzu, wenn es nicht möglich ist, die Abkürzung oder das Akronym im Text auszubuchstabieren. Eine Diskrepanz zwischen dem angesagten Wort oder Ausdruck und dem, was auf dem Bildschirm angezeigt wird, insbesondere wenn es sich um technischen Jargon handelt, mit dem der Leser möglicherweise nicht vertraut ist, kann verwirrend sein.

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

Dies ist besonders hilfreich für Menschen, die mit den im Inhalt diskutierten Begriffen oder Konzepten nicht vertraut sind, Menschen, die neu in der Sprache sind, und Menschen mit kognitiven Bedenken.

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

HTML

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

Ergebnis

Sie können CSS verwenden, um einen benutzerdefinierten Stil für Abkürzungen festzulegen, 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

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

HTML

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

Ergebnis

Sie können <abbr> in Verbindung mit <dfn> verwenden, um eine Abkürzung formeller 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>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

• Verwendung des <abbr>-Elements