HTML <acronym> Tag
Der <acronym>-Tag kennzeichnet Akronyme und Abkürzungen. Erfahre Syntax, Beispiele und die moderne Alternative mit <abbr>.
Der <acronym>-Tag wurde verwendet, um ein Akronym oder eine Abkürzung zu definieren. Um den vollständigen Begriff anzugeben, wird das globale title-Attribut eingesetzt, das als Tooltip angezeigt wird, wenn man mit der Maus über den Text fährt.
Diese Seite erklärt, was <acronym> getan hat, warum er aus HTML5 entfernt wurde und wie man stattdessen das moderne <abbr>-Element verwendet — einschließlich der wichtigen Zugänglichkeitsdetails.
Der <acronym>-Tag ist ein veralteter HTML-Tag und wird in HTML5 nicht unterstützt. Verwende stattdessen den <abbr>-Tag.
Warum <acronym> aus HTML5 entfernt wurde
HTML hatte einst zwei Elemente für verkürzte Wörter: <acronym> für Akronyme (Kurzformen, die als einzelnes Wort ausgesprochen werden, wie NASA oder SCUBA) und <abbr> für Abkürzungen (jede verkürzte Form, wie Dr. oder HTML). In der Praxis verursachte diese Unterscheidung mehr Verwirrung als sie löste — Autoren waren sich uneinig, ob etwas ein „Akronym" oder eine „Abkürzung" war, und Screenreader hatten keinen sinnvollen Weg, auf den Unterschied zu reagieren.
HTML5 vereinfachte dies, indem nur <abbr> beibehalten wurde, das sowohl Abkürzungen als auch Akronyme auszeichnet. Da jedes Akronym auch eine Abkürzung ist, wurde das dedizierte <acronym>-Element überflüssig und aus der Spezifikation gestrichen.
Syntax
Der <acronym>-Tag wird paarweise verwendet. Der Inhalt steht zwischen dem öffnenden (<acronym>) und schließenden (</acronym>) Tag.
Beispiel des HTML-<acronym>-Tags:
HTML acronym Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Hover the mouse cursor over acronym HTML</p>
<acronym title="Hyper Text Markup Language">HTML</acronym>
</body>
</html>Im folgenden Beispiel wird der <abbr>-Tag anstelle von <acronym> verwendet. Der Browser rendert die Zeichen innerhalb des <abbr>-Tags als Abkürzung oder Akronym. Das title-Attribut sollte stets die vollständig ausgeschriebene Form des Begriffs enthalten — dieser Text kann von assistiven Technologien vorgelesen und von Browsern als Tooltip angezeigt werden.
Beispiel des HTML-<abbr>-Tags:
HTML abbr tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
</body>
</html>Abkürzung vs. Akronym
Die beiden Begriffe überschneiden sich, weshalb HTML5 sie zusammengeführt hat:
- Eine Abkürzung ist jede verkürzte Form eines Wortes oder einer Phrase, wie Dr. für „Doktor" oder usw. für „und so weiter."
- Ein Akronym ist eine besondere Art von Abkürzung, die aus den Anfangsbuchstaben einer Phrase gebildet wird und als einzelnes Wort ausgesprochen wird, wie NASA oder RADAR.
Das <abbr>-Element deckt beides ab. Du umschließt die Kurzform mit <abbr> und gibst die vollständige Schreibweise im title-Attribut an — der Browser muss nicht wissen, ob es sich technisch gesehen um ein Akronym handelt:
<p>
<abbr title="HyperText Markup Language">HTML</abbr> is written with
<abbr title="Cascading Style Sheets">CSS</abbr>.
</p>Browser-Unterstützung und heutiges Verhalten von <acronym>
Obwohl <acronym> veraltet ist, erkennen alle gängigen Browser ihn noch und rendern ihn als Fallback, sodass alte Seiten nicht kaputtgehen. Intern parsen Browser <acronym> in dasselbe DOM-Interface wie <abbr> (HTMLElement), was bedeutet, dass Skripte und Styles beide konsistent behandeln. Dennoch sollte <acronym> niemals in neuem Code verwendet werden — Validatoren melden ihn als Fehler, und zukünftige Tools sind nicht verpflichtet, ihn zu unterstützen.
Standard-Styling
Moderne Browser wenden kein Standard-Styling auf den <acronym>- oder <abbr>-Tag an. Jede visuelle Darstellung (wie Unterstreichungen oder Kapitälchen) muss explizit mit CSS definiert werden.
Früher haben einige Browser <abbr> und <acronym> mit einer gepunkteten Unterstreichung gerendert, um anzuzeigen, dass ein Tooltip verfügbar ist. Wenn du dieses vertraute Aussehen zurückbringen möchtest, füge es selbst hinzu:
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}Zugänglichkeit
Das title-Attribut ist mehr als ein Tooltip — es ist der zugängliche Name der Abkürzung. Wenn ein Screenreader auf <abbr title="World Health Organization">WHO</abbr> trifft, kann er die vollständige Bezeichnung vorlesen, anstatt die Buchstaben einzeln zu buchstabieren oder falsch auszusprechen. Gib immer den vollständigen Begriff in title an, damit das Markup auch für Personen sinnvoll ist, die den Tooltip nicht sehen können.
title-Tooltips sind nicht für alle zugänglich. Sie erscheinen nur beim Hover mit der Maus, sodass Tastatur- und Touchscreen-Nutzer sie niemals sehen. Behandle den Tooltip als Progressive Enhancement: Wenn die ausgeschriebene Form wesentlich ist, schreibe sie beim ersten Auftreten auch im umgebenden Text aus, zum Beispiel: „die Weltgesundheitsorganisation (<abbr title="World Health Organization">WHO</abbr>)."
Attribute
Der <acronym>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.
Styling des HTML-<acronym>-Tags
Da Browser kein Standard-Styling anwenden, kannst du CSS verwenden, um ein einheitliches Erscheinungsbild sicherzustellen. Beachte, dass das Styling des <acronym>-Tags veraltet ist, da der Tag selbst als deprecated gilt. Das folgende Beispiel gestaltet den <abbr>-Tag (den modernen Ersatz) mit einer gepunkteten Unterstreichung und Kapitälchen:
abbr {
text-decoration: underline dotted;
font-variant: small-caps;
}