---
title: '<abbr>: Das Abkürzungselement'
slug: Web/HTML/Element/abbr
tags:
  - Element
  - HTML
  - HTML Textlevel Semantik
  - Referenz
  - Web
translation_of: Web/HTML/Element/abbr
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">Das <strong>HTML-Abkürzungselement</strong> (<strong><code>&lt;abbr&gt;</code></strong>) steht für eine Abkürzung oder ein Akronym. Das optionale Attribut {{htmlattrxref("title")}} kann eine Erweiterung oder Beschreibung für die Abkürzung bereitstellen.</span> Wenn vorhanden, <code>title</code> diese vollständige Beschreibung und nichts anderes enthalten.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>



<p>Der Artikel <em><a href="/de/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Wie Abkürzungen markiert und verständlich gemacht werden</a></em>, ist ein Leitfaden zur Verwendung von <code>&lt;abbr&gt;</code> und verwandten Elementen.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Inhaltskategorien</a></th>
   <td><a href="/de/docs/Web/HTML/Content_categories#Flow_content">Fließender Inhalt</a>, <a href="/de/docs/Web/HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a>, fühlbarer Inhalt</td>
  </tr>
  <tr>
   <th scope="row">Erlaubter Inhalt</th>
   <td><a href="/de/docs/Web/HTML/Content_categories#Phrasing_content">Formulierungsinhalt</a></td>
  </tr>
  <tr>
   <th scope="row">Tag Wegfall</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte Elternelemente</th>
   <td>Jedes Element, das Formulierungsinhalt akzeptiert</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte ARIA Rollen</th>
   <td>Alle</td>
  </tr>
  <tr>
   <th scope="row">DOM-Schnittstelle</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attribute">Attribute</h2>

<p>Dieses Element unterstützt nur die <a href="/de/docs/Web/HTML/Global_attributes">globalen Attribute</a>. Das Attribut {{htmlattrxref("title")}} hat bei Verwendung mit dem <code>&lt;abbr&gt;</code>-Element eine bestimmte semantische Bedeutung. Es <em>muss</em> 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.</p>

<p>Jedes <code>&lt;abbr&gt;</code>-Element, das Sie verwenden, ist unabhängig von allen anderen; wenn Sie <code>title</code> für eines angeben, wird derselbe Erweiterungstext nicht automatisch an ein anderes mit demselben Inhaltstext angehängt.</p>

<h2 id="Nutzungshinweise">Nutzungshinweise</h2>

<h3 id="Typische_Anwendungsfälle">Typische Anwendungsfälle</h3>

<p>Es ist sicherlich nicht erforderlich, dass alle Abkürzungen mit <code>&lt;abbr&gt;</code> markiert werden. Es gibt jedoch einige Fälle, in denen es hilfreich ist, dies zu tun:</p>

<ul>
 <li>Wenn eine Abkürzung verwendet wird und Sie eine Erweiterung oder Definition außerhalb des Dokumentenflusses bereitstellen möchten, verwenden Sie <code>&lt;abbr&gt;</code> mit einer entsprechenden {{htmlattrxref("title")}}.</li>
 <li>Um eine Abkürzung zu definieren, die dem Leser möglicherweise nicht vertraut ist, legen Sie den Begriff mit <code>&lt;abbr&gt;</code> und entweder einem <code>title</code>-Attribut oder einem Inline-Text vor, der die Definition bereitstellt.</li>
 <li>Wenn die Anwesenheit einer Abkürzung im Text semantisch notiert werden muss, ist das <code>&lt;abbr&gt;</code>-Element hilfreich. Dies kann wiederum für Styling- oder Scripting-Zwecke verwendet werden.</li>
 <li>Sie können <code>&lt;abbr&gt;</code> zusammen mit {{HTMLElement("dfn")}} verwenden, um Definitionen für Begriffe festzulegen, die Abkürzungen oder Akronyme sind. Siehe das Beispiel {{anch("Eine Abkürzung definieren")}} unten.</li>
</ul>

<h3 id="Überlegungen_zur_Grammatik">Überlegungen zur Grammatik</h3>

<p>Verwenden Sie in Sprachen mit {{interwiki ("wikipedia", "Numerus")}} (d. h. Sprachen, in denen die Anzahl der Elemente die Grammatik eines Satzes beeinflusst) die gleiche grammatikalische Nummer in Ihrem <code>title</code>-Attribut wie in Ihrem <code>&lt;abbr&gt;</code>-Element. Dies ist besonders wichtig bei Sprachen mit mehr als zwei Numeri, wie z. B. Arabisch, ist aber auch in Englisch relevant.</p>

<h2 id="Standarddarstellung">Standarddarstellung</h2>

<p>Der Zweck dieses Elements ist ausschließlich für den Autor gedacht und wird von allen Browsern standardmäßig inline ({{cssxref('display')}}<code>: inline</code>) angezeigt. Die Standardeinstellung ist jedoch von Browser zu Browser unterschiedlich:</p>

<ul>
 <li>Manche Browser, wie der Internet Explorer, stellen es nicht anders als das {{HTMLElement("span")}}-Element dar.</li>
 <li>Opera, Firefox, Chrome und einige andere fügen dem Inhalt des Elements eine gepunktete Unterstreichung hinzu.</li>
 <li>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 <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-variant" title="The CSS Eigenschaft font-variant property selects a normal, or small-caps face from a font family. Setting font-variant is also possible by using the font shorthand."><code>font-variant</code></a><code>: none</code> hinzu.</li>
</ul>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Eine_Abkürzung_semantisch_markieren">Eine Abkürzung semantisch markieren</h3>

<p>Um eine Abkürzung zu markieren, ohne eine Erweiterung oder Beschreibung anzugeben, verwenden Sie einfach <code>&lt;abbr&gt;</code> ohne Attribute, wie in diesem Beispiel dargestellt.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;Using &lt;abbr&gt;HTML&lt;/abbr&gt; is fun and easy!&lt;/p&gt;</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}</p>

<h3 id="Abkürzungen_formatieren">Abkürzungen formatieren</h3>

<p>Sie können CSS verwenden, um einen benutzerdefinierten Stil festzulegen, der für Abkürzungen verwendet wird, wie in diesem einfachen Beispiel gezeigt.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;p&gt;Using &lt;abbr&gt;CSS&lt;/abbr&gt;, you can style your abbreviations!&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">abbr {
  font-variant: all-small-caps;
}</pre>

<h4 id="Ergebnis_2">Ergebnis</h4>

<p>{{EmbedLiveSample("Styling_abbreviations")}}</p>

<h3 id="Eine_Erweiterung_bereitstellen">Eine Erweiterung bereitstellen</h3>

<p>Durch das Hinzufügen eines Attributs {{htmlattrxref("title")}} können Sie eine Erweiterung oder Definition für die Abkürzung oder das Akronym angeben.</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;p&gt;Ashok's joke made me &lt;abbr title="Laugh Out Loud"&gt;LOL&lt;/abbr&gt; big
time.&lt;/p&gt;</pre>

<h4 id="Ergebnis_3">Ergebnis</h4>

<p>{{EmbedLiveSample("Providing_an_expansion")}}</p>

<h3 id="Eine_Abkürzung_definieren">Eine Abkürzung definieren</h3>

<p>Sie können <code>&lt;abbr&gt;</code> zusammen mit {{HTMLElement("dfn")}} verwenden, um eine Abkürzung formal zu definieren, wie hier gezeigt.</p>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
&lt;/dfn&gt; is a markup language used to create the semantics and structure
of a web page.&lt;/p&gt;

&lt;p&gt;A &lt;dfn id="spec"&gt;Specification&lt;/dfn&gt;
(&lt;abbr title="Specification"&gt;spec&lt;/abbr&gt;) is a document that outlines
in detail how a technology or API is intended to function and how it is
accessed.&lt;/p&gt;</pre>

<h4 id="Ergebnis_4">Ergebnis</h4>

<p>{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}</p>

<p>Ausführlichere Beispiele finden Sie im Artikel <em><a href="/de/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">Wie Abkürzungen markiert und verständlich gemacht werden</a></em>.</p>

<h2 id="Barrierefreiheit">Barrierefreiheit</h2>

<p>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.</p>

<h4 id="Beispiel">Beispiel</h4>

<pre class="brush: html">&lt;p&gt;JavaScript Object Notation (&lt;abbr&gt;JSON&lt;/abbr&gt;) is a lightweight data-interchange format.&lt;/p&gt;
</pre>

<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.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '&lt;abbr&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>



<p>{{Compat("html.elements.abbr")}}</p>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/Learn/HTML/Element/abbr">Benutzung des <code>&lt;abbr&gt;</code>-Elements</a></li>
 <li>Andere Elemente, die <a href="/de/docs/Web/HTML/Text_level_semantics_conveying_elements">Semantik auf Textebene</a> vermitteln: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li>
 <li>Das veraltete Element {{HTMLElement("acronym")}}, dessen Verantwortlichkeiten in <code>&lt;abbr&gt;</code> zusammengefasst wurden</li>
</ul>