<abbr>: Das Abkürzungselement
Das HTML-Abkürzungselement (<abbr>
) steht für eine Abkürzung oder ein Akronym. Das optionale Attribut title
kann eine Erweiterung oder Beschreibung für die Abkürzung bereitstellen. Wenn vorhanden, title
diese vollständige Beschreibung und nichts anderes enthalten.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Der Artikel Wie Abkürzungen markiert und verständlich gemacht werden, ist ein Leitfaden zur Verwendung von <abbr>
und verwandten Elementen.
Inhaltskategorien | Fließender Inhalt (en-US), Formulierungsinhalt (en-US), fühlbarer Inhalt |
---|---|
Erlaubter Inhalt | Formulierungsinhalt (en-US) |
Tag Wegfall | Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich. |
Erlaubte Elternelemente | Jedes Element, das Formulierungsinhalt akzeptiert |
Erlaubte ARIA Rollen | Alle |
DOM-Schnittstelle | HTMLElement (en-US) |
Attribute
Dieses Element unterstützt nur die globalen Attribute. Das Attribut title
hat bei Verwendung mit dem <abbr>
-Element eine bestimmte semantische Bedeutung. Es muss eine vollständige von Menschen lesbare Beschreibung oder Erweiterung der Abkürzung enthalten. Dieser Text wird von Browsern häufig als Tooltip dargestellt, wenn der Mauszeiger über das Element bewegt wird.
Jedes <abbr>
-Element, das Sie verwenden, ist unabhängig von allen anderen; wenn Sie title
für eines angeben, wird derselbe Erweiterungstext nicht automatisch an ein anderes mit demselben Inhaltstext angehängt.
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, dies zu tun:
- Wenn eine Abkürzung verwendet wird und Sie eine Erweiterung oder Definition außerhalb des Dokumentenflusses bereitstellen möchten, verwenden Sie
<abbr>
mit einer entsprechendentitle
. - Um eine Abkürzung zu definieren, die dem Leser möglicherweise nicht vertraut ist, legen Sie den Begriff mit
<abbr>
und entweder einemtitle
-Attribut oder einem Inline-Text vor, der die Definition bereitstellt. - Wenn die Anwesenheit einer Abkürzung im Text semantisch notiert werden muss, ist das
<abbr>
-Element hilfreich. Dies kann wiederum für Styling- oder Scripting-Zwecke verwendet werden. - Sie können
<abbr>
zusammen mit <dfn> (en-US) verwenden, um Definitionen für Begriffe festzulegen, die Abkürzungen oder Akronyme sind. Siehe das Beispiel Eine Abkürzung definieren unten.
Überlegungen zur Grammatik
Verwenden Sie in Sprachen mit Numerus (d. h. Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst) die gleiche grammatikalische Nummer in Ihrem title
-Attribut wie in Ihrem <abbr>
-Element. Dies ist besonders wichtig bei Sprachen mit mehr als zwei Numeri, wie z. B. Arabisch, ist aber auch in Englisch relevant.
Standarddarstellung
Der Zweck dieses Elements ist ausschließlich für den Autor gedacht und wird von allen Browsern standardmäßig inline (display
: inline
) angezeigt. Die Standardeinstellung ist jedoch von Browser zu Browser unterschiedlich:
- Manche Browser, wie der Internet Explorer, stellen es nicht anders als das <span> (en-US)-Element dar.
- Opera, Firefox, Chrome und einige andere fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu.
- Einige Browser fügen nicht nur eine gepunktete Unterstreichung hinzu, sondern setzen sie auch in Kapitälchen ein. Um dies zu vermeiden, fügen Sie Ihrem CSS etwas wie
font-variant
: none
hinzu.
Beispiele
Eine Abkürzung semantisch markieren
Um eine Abkürzung zu markieren, ohne eine Erweiterung oder Beschreibung anzugeben, verwenden Sie einfach <abbr>
ohne Attribute, wie in diesem Beispiel dargestellt.
HTML
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
Ergebnis
Abkürzungen formatieren
Sie können CSS verwenden, um einen benutzerdefinierten Stil festzulegen, der für Abkürzungen verwendet wird, 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 Erweiterung bereitstellen
Durch das Hinzufügen eines Attributs title
können Sie eine Erweiterung oder Definition für die Abkürzung oder das Akronym angeben.
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>
zusammen mit <dfn> (en-US) verwenden, um eine Abkürzung formal 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 title="Specification">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
Ausführlichere Beispiele finden Sie im Artikel Wie Abkürzungen markiert und verständlich gemacht werden.
Barrierefreiheit
Wenn Sie das Akronym oder die Abkürzung bei der ersten Verwendung auf einer Seite vollständig ausschreiben, hilft dies den Menschen, sie zu verstehen, insbesondere wenn es sich um technische Inhalte oder um Fachjargon handelt.
Beispiel
<p>JavaScript Object Notation (<abbr>JSON</abbr>) is a lightweight data-interchange format.</p>
Dies ist besonders hilfreich für Personen, die mit der Terminologie oder den inhaltlichen Begriffen nicht vertraut sind, Personen, die sich mit der Sprache noch nicht auskennen, und Menschen mit kognitiven Hürden.
Spezifikationen
Specification | Status | Comment |
---|---|---|
HTML Living Standard Die Definition von '<abbr>' in dieser Spezifikation. |
Lebender Standard | |
HTML5 Die Definition von '<abbr>' in dieser Spezifikation. |
Empfehlung | |
HTML 4.01 Specification Die Definition von '<abbr>' in dieser Spezifikation. |
Empfehlung |
Browserkompatibilität
BCD tables only load in the browser
Siehe auch
- Benutzung des
<abbr>
-Elements - Andere Elemente, die Semantik auf Textebene vermitteln:
<a>
,<em>
,<strong>
, <small> (en-US),<cite>
,<q>
, <dfn> (en-US),<time>
,<code>
,<var>
, <samp> (en-US), <kbd> (en-US), <sub> (en-US), <sup> (en-US),<b>
,<i>
, <mark> (en-US), <ruby> (en-US), <rp> (en-US), <rt> (en-US),<bdo>
, <span> (en-US),<br>
, <wbr> (en-US). - Das veraltete Element
<acronym>
, dessen Verantwortlichkeiten in<abbr>
zusammengefasst wurden