<abbr> HTML-Kürzel-Element

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 spezielle 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 in der Regel von Browsern als Tooltip angezeigt, wenn der Mauszeiger über das Element gehalten wird.

Jedes <abbr>-Element, das Sie verwenden, ist unabhängig von allen anderen; die Bereitstellung eines title für eines bindet nicht automatisch denselben Entfaltungstext an andere mit demselben Inhaltstext.

Verwendungshinweise

Typische Anwendungsfälle

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 Entfaltung oder Definition außerhalb des Inhaltsflusses des Dokuments bereitstellen möchten, verwenden Sie <abbr> mit einem geeigneten title.
• Um eine Abkürzung zu definieren, die dem Leser möglicherweise nicht geläufig 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-Entfaltung oder Definition nicht verfügbar ist.
• Wenn die Präsenz einer Abkürzung im Text semantisch notiert werden muss, ist das <abbr>-Element nützlich. Dies kann wiederum für Stil- oder Skriptzwecke verwendet werden.
• Sie können <abbr> zusammen mit <dfn> verwenden, um Definitionen für Begriffe zu erstellen, die Abkürzungen oder Akronyme sind. Siehe das Beispiel Definieren einer Abkürzung unten.

Grammatikalische Überlegungen

In Sprachen mit grammatikalischem Numerus (d.h. Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst), verwenden Sie denselben grammatikalischen Numerus in Ihrem title-Attribut wie innerhalb Ihres <abbr>-Elements. Dies ist besonders wichtig in Sprachen mit mehr als zwei Numeri, wie Arabisch, aber auch in Englisch relevant.

Standardstil

Der Zweck dieses Elements liegt rein im Komfort des Autors und alle Browser zeigen es standardmäßig inline an (display: inline), obwohl sich dessen Standardstil von einem Browser zum anderen unterscheidet:

Einige Browser fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu. Andere fügen eine gepunktete Unterstreichung hinzu und konvertieren den Inhalt in Großbuchstaben. Andere stylen es möglicherweise nicht anders als ein <span>-Element. Um diesen Stil zu kontrollieren, verwenden Sie text-decoration und font-variant.

Barrierefreiheit

Das erste Mal, dass ein Akronym oder eine Abkürzung in vollem Umfang auf einer Seite ausgeschrieben wird, ist hilfreich, um Menschen beim Verständnis zu unterstützen, insbesondere wenn der Inhalt technisch oder Fachjargon ist.

Fügen Sie nur dann ein title hinzu, wenn es nicht möglich ist, die Abkürzung oder das Akronym im Text zu erweitern. Eine Abweichung zwischen dem angekündigten 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 verstörend wirken.

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

Dies ist besonders hilfreich für Menschen, die mit der inhaltlich diskutierten Terminologie oder den Konzepten nicht vertraut sind, für Menschen, die neu in der Sprache sind, und für Menschen mit kognitiven Beeinträchtigungen.

Beispiele

Eine Abkürzung semantisch auszeichnen

Um eine Abkürzung ohne Bereitstellung einer Entfaltung oder Beschreibung auszuzeichnen, verwenden Sie <abbr> ohne Attribute, wie in diesem Beispiel.

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

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

CSS

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

Ergebnis

Eine Entfaltung bereitstellen

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

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung des <abbr>-Elements