<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 Entfaltung der Abkürzung enthalten. Dieser Text wird häufig von Browsern als Tooltip angezeigt, wenn der Mauszeiger über das Element bewegt wird.

Jedes verwendete <abbr>-Element ist unabhängig von allen anderen; das Bereitstellen eines title für eines bindet nicht automatisch denselben Erweiterungstext an andere Elemente mit demselben Inhaltstext.

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

• Wenn eine Abkürzung verwendet wird und Sie eine Entfaltung 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 möglicherweise unbekannt ist, präsentieren Sie den Begriff mit <abbr> und einbettetem Text, der die Definition liefert. Fügen Sie nur dann ein title-Attribut hinzu, wenn die Erweiterung oder Definition im Text nicht verfügbar ist.
• Wenn das Vorhandensein einer Abkürzung im Text semantisch notiert werden muss, ist das <abbr>-Element nützlich. Dies kann dann zu Stil- oder Skriptzwecken verwendet werden.
• Sie können <abbr> in Verbindung mit <dfn> verwenden, um Definitionen für Begriffe zu erstellen, die Abkürzungen oder Akronyme sind. Siehe das Beispiel Defining an abbreviation unten.

In Sprachen mit grammatischem Numerus (das heißt, Sprachen, bei denen die Anzahl der Elemente die Grammatik des 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, ist aber auch im Englischen relevant.

Der Zweck dieses Elements liegt rein im Komfort 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 dem Inhalt des Elements eine gepunktete Unterstreichung hinzu. Andere fügen eine gepunktete Unterstreichung hinzu, während sie den Inhalt in Kapitälchen umwandeln. Andere gestalten ihn möglicherweise nicht anders als ein <span>-Element. Um diese Gestaltung zu kontrollieren, verwenden Sie text-decoration und font-variant.

Das Ausschreiben des Akronyms oder der Abkürzung beim ersten Mal, dass es auf einer Seite verwendet wird, ist hilfreich, um 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 Ausdruck und dem, was auf dem Bildschirm angezeigt wird, insbesondere wenn es sich um Fachjargon handelt, mit dem der Leser möglicherweise nicht vertraut ist, kann irritierend 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, Neulinge in der Sprache und Menschen mit kognitiven Einschränkungen.

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

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 zu sehen ist.

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 Erweiterung 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> zusammen mit <dfn> verwenden, um eine Abkürzung formell 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