<abbr>: Das Abkürzungselement

Dieses Element unterstützt nur die globalen Attribute. Das title-Attribut hat eine spezielle semantische Bedeutung, wenn es mit dem <abbr>-Element verwendet wird; es muss eine vollständige, menschenlesbare Beschreibung oder Erweiterung der Abkürzung enthalten. Dieser Text wird häufig von Browsern als Tooltip präsentiert, wenn der Mauszeiger über dem Element schwebt.

Jedes <abbr>-Element, das Sie verwenden, ist unabhängig von allen anderen; die Bereitstellung eines title für eines bedeutet nicht, dass automatisch derselbe Erweiterungstext an andere mit demselben Inhaltstext angehängt wird.

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 Erweiterung oder Definition außerhalb des Flusses des Dokumentinhalts 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 normalem 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 Skriptzwecke 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 Definieren einer Abkürzung unten.

In Sprachen mit grammatischem Numerus (das heißt, Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst) verwenden Sie denselben grammatischen Numerus in Ihrem title-Attribut wie in Ihrem <abbr>-Element. Dies ist besonders wichtig in Sprachen mit mehr als zwei Numeri, wie Arabisch, 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 Standardstyling 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 und konvertieren die Inhalte in Kapitälchen. Andere können es nicht anders gestalten als ein <span>-Element. Um dieses Styling zu kontrollieren, verwenden Sie text-decoration und font-variant.

Das einmalige Ausschreiben des Akronyms oder der Abkürzung auf einer Seite ist vorteilhaft, um Menschen zu helfen, es zu verstehen, insbesondere wenn der Inhalt technisch oder Fachjargon ist.

Fügen Sie nur ein title hinzu, wenn das Ausschreiben der Abkürzung oder des Akronyms im Text nicht möglich ist. Wenn es einen Unterschied zwischen dem angekündigten Wort oder Satz und dem gibt, was auf dem Bildschirm angezeigt wird, kann das besonders störend sein, insbesondere wenn es sich um Fachjargon handelt, den der Leser möglicherweise nicht versteht.

<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 besprochenen Begriffen oder Konzepten nicht vertraut sind, Menschen, die neu in der Sprache sind, und Menschen mit kognitiven Bedenken.

Um eine Abkürzung ohne eine Erweiterung oder Beschreibung semantisch auszuzeichnen, verwenden Sie <abbr> ohne jegliche Attribute, wie in diesem Beispiel zu sehen.

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.

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