<abbr>: Das Abkürzungselement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das <abbr>
HTML Element repräsentiert eine Abkürzung oder ein Akronym.
Wenn Sie eine Abkürzung oder ein Akronym einschließen, geben Sie bei deren erster Verwendung eine vollständige Ausschreibung des Begriffs in einfachem Text an und verwenden Sie <abbr>
, um die Abkürzung zu kennzeichnen. Dies informiert den Benutzer darüber, was die Abkürzung oder das Akronym bedeutet.
Das optionale title
Attribut kann eine Erweiterung für die Abkürzung oder das Akronym bereitstellen, wenn eine vollständige Ausschreibung nicht vorhanden ist. Dies gibt den Benutzeragenten einen Hinweis darauf, wie der Inhalt angezeigt oder mitgeteilt werden soll, und informiert alle Benutzer darüber, was die Abkürzung bedeutet. Falls vorhanden, muss title
diese vollständige Beschreibung und nichts anderes enthalten.
Probieren Sie es aus
Attribute
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 Ausschreibung der Abkürzung enthalten. Dieser Text wird oft von Browsern als Tooltip angezeigt, wenn der Mauszeiger über das Element bewegt wird.
Jedes von Ihnen verwendete <abbr>
Element ist unabhängig von allen anderen; die Bereitstellung eines title
für eines hängt nicht automatisch den gleichen Erweiterungstext an andere mit demselben Inhaltstext an.
Anwendungshinweise
Typische Anwendungsfälle
Es ist sicherlich nicht erforderlich, dass alle Abkürzungen mit <abbr>
gekennzeichnet werden. Es gibt jedoch einige Fälle, in denen dies hilfreich ist:
- Wenn eine Abkürzung verwendet wird und Sie eine Ausschreibung oder Definition außerhalb des Dokumenteninhaltsflusses bereitstellen möchten, verwenden Sie
<abbr>
mit einem geeignetentitle
. - Um eine Abkürzung zu definieren, die dem Leser möglicherweise unbekannt ist, präsentieren Sie den Begriff mit
<abbr>
und einem eingefügten Text, der die Definition liefert. Fügen Sie eintitle
Attribut nur dann hinzu, wenn die Inline-Ausschreibung oder Definition nicht verfügbar ist. - Wenn die Anwesenheit einer Abkürzung im Text semantisch notiert werden muss, ist das
<abbr>
Element nützlich. Dies kann wiederum zu Styling- 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.
Grammatische Überlegungen
In Sprachen mit grammatischem Numerus (d. h. Sprachen, in denen die Anzahl der Gegenstände die Grammatik eines Satzes beeinflusst), verwenden Sie die gleiche grammatische Anzahl in Ihrem title
Attribut wie in Ihrem <abbr>
Element. Dies ist besonders wichtig in Sprachen mit mehr als zwei Nummern, wie Arabisch, aber auch relevant im Englischen.
Standardstil
Der Zweck dieses Elements liegt rein im Komfort des Autors und alle Browser zeigen es standardmäßig inline an (display: inline
), obwohl sich ihr 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, während sie den Inhalt in Kapitälchen umwandeln. Andere könnten es nicht anders als ein <span>
Element stylen. Um dieses Styling zu kontrollieren, verwenden Sie text-decoration
und font-variant
.
Barrierefreiheit
Die vollständige Ausschreibung eines Akronyms oder einer Abkürzung bei der ersten Nutzung auf einer Seite ist von Vorteil, um das Verständnis zu erleichtern, insbesondere wenn der Inhalt technisch oder branchenspezifisch ist.
Fügen Sie nur dann ein title
hinzu, wenn es im Text nicht möglich ist, die Abkürzung oder das Akronym auszuschreiben. Ein Unterschied zwischen dem mitgeteilten Wort oder Satz und dem, was auf dem Bildschirm angezeigt wird - insbesondere wenn es sich um branchenspezifischen 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, Personen, die neu in der Sprache sind, und Menschen mit kognitiven Bedenken.
Beispiele
Markierung einer Abkürzung mit Bedeutung
Um eine Abkürzung ohne Bereitstellung einer Ausschreibung oder Beschreibung zu kennzeichnen, verwenden Sie <abbr>
ohne Attribute, wie in diesem Beispiel gezeigt.
HTML
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
Ergebnis
Formatieren von Abkürzungen
Sie können CSS verwenden, um einen benutzerdefinierten Stil für Abkürzungen festzulegen, wie in diesem grundlegenden Beispiel gezeigt.
HTML
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
CSS
abbr {
font-variant: all-small-caps;
}
Ergebnis
Bereitstellung einer Ausschreibung
Das Hinzufügen eines title
Attributs ermöglicht Ihnen, eine Ausschreibung 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
Definition einer Abkürzung
Sie können <abbr>
in Verbindung mit <dfn>
verwenden, um formeller eine Abkürzung 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
Inhaltskategorien | Flussinhalt, Phrasing-Inhalt, greifbarer Inhalt |
---|---|
Erlaubter Inhalt | Phrasing-Inhalt |
Tagauslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das Phrasing-Inhalt akzeptiert |
Implizite ARIA-Rolle | Keine entsprechende Rolle |
Erlaubte ARIA-Rollen | Beliebige |
DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-abbr-element |
Browser-Kompatibilität
BCD tables only load in the browser