<u>: Das nicht artikulierte Annotations- (Unterstreichungs-) Element
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 <u>
HTML-Element repräsentiert einen Abschnitt von Inline-Text, der in einer Weise gerendert werden sollte, die darauf hinweist, dass er eine nicht-textuelle Annotation hat. Dies wird standardmäßig als einfache solide Unterstreichung dargestellt, kann jedoch mit CSS geändert werden.
Warnung: Dieses Element wurde in älteren HTML-Versionen als "Unterstreichungs-"Element bezeichnet und wird manchmal auch heute noch in dieser Weise missbräuchlich verwendet. Um Text zu unterstreichen, sollten Sie stattdessen einen Stil anwenden, der die CSS-text-decoration
-Eigenschaft auf underline
setzt.
Probieren Sie es aus
Siehe den Abschnitt Verwendungsnotizen für weitere Details darüber, wann <u>
angemessen verwendet wird und wann nicht.
Attribute
Dieses Element umfasst nur die globalen Attribute.
Verwendungsnotizen
Zusammen mit anderen reinen Stil-Elementen wurde das ursprüngliche HTML-Unterstreichungs- (<u>
) Element in HTML 4 veraltet; jedoch wurde <u>
in HTML 5 mit einer neuen, semantischen Bedeutung wiederhergestellt: Text zu markieren, der eine Art nicht-textueller Annotation aufweist.
Hinweis: Vermeiden Sie die Verwendung des <u>
-Elements mit seinem Standardstil (unterstrichener Text) auf eine Weise, die mit einem Hyperlink verwechselt werden könnte, der ebenfalls standardmäßig unterstrichen ist.
Verwendungsszenarien
Gültige Anwendungsfälle für das <u>
-Element umfassen die Annotation von Rechtschreibfehlern, die Anwendung eines Eigennamenzeichens zur Kennzeichnung von Eigennamen in chinesischem Text und andere Formen der Annotation.
Sie sollten <u>
nicht verwenden, um Text zu Präsentationszwecken zu unterstreichen oder um Buchtitel zu kennzeichnen.
Andere in Betracht zu ziehende Elemente
In den meisten Fällen sollten Sie ein anderes Element als <u>
verwenden, wie z.B.:
<em>
um betonte Betonung anzuzeigen<b>
um auf Text aufmerksam zu machen<mark>
um Schlüsselwörter oder -phrasen zu markieren<strong>
um anzuzeigen, dass Text von großer Bedeutung ist<cite>
um Buchtitel oder andere Publikationen zu kennzeichnen<i>
um technische Begriffe, Transliteration, Gedanken oder Namen von Schiffen in westlichen Texten anzuzeigen
Um textuelle Annotationen bereitzustellen (im Gegensatz zu den nicht-textuellen Annotationen, die mit <u>
erstellt werden), verwenden Sie das <ruby>
-Element.
Um ein unterstrichenes Aussehen ohne eine semantische Bedeutung zu erzielen, verwenden Sie den underline
-Wert der text-decoration
-Eigenschaft.
Beispiele
Anzeige eines Rechtschreibfehlers
Dieses Beispiel verwendet das <u>
-Element und etwas CSS, um einen Absatz darzustellen, der einen Rechtschreibfehler enthält, wobei der Fehler im Stil einer roten gewellten Unterstreichung angezeigt wird, wie sie für diesen Zweck häufig verwendet wird.
HTML
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
Im HTML sehen wir die Verwendung von <u>
mit einer Klasse, spelling
, die verwendet wird, um die falsche Schreibweise des Wortes "wrongly" anzuzeigen.
CSS
u.spelling {
text-decoration: red wavy underline;
}
Dieses CSS gibt an, dass das <u>
-Element, wenn es mit der Klasse spelling
gestylt ist, eine rote gewellte Unterstreichung unter seinem Text haben sollte. Dies ist ein gängiger Stil für Rechtschreibfehler. Ein anderer üblicher Stil kann mit einer „roten gestrichelten Unterstreichung“ dargestellt werden.
Ergebnis
Das Ergebnis sollte jedem vertraut sein, der heute eine der bekannteren Textverarbeitungsprogramme verwendet hat.
Vermeidung von <u>
Meistens möchten Sie tatsächlich <u>
nicht verwenden. Hier sind einige Beispiele, die zeigen, was Sie stattdessen in verschiedenen Fällen tun sollten.
Nicht-semantische Unterstreichungen
Um Text ohne Bedeutung zu unterstreichen, verwenden Sie ein <span>
-Element mit der Eigenschaft text-decoration
auf "underline"
, wie unten gezeigt.
HTML
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
CSS
.underline {
text-decoration: underline;
}
Ergebnis
Darstellung eines Buchtitels
Buchtitel sollten mit dem <cite>
-Element und nicht mit <u>
oder sogar <i>
präsentiert werden.
Verwendung des cite-Elements
<p>The class read <cite>Moby-Dick</cite> in the first term.</p>
Styling des cite-Elements
Die Standardstil für das <cite>
-Element rendert den Text kursiv. Sie können dies mit CSS überschreiben:
<p>The class read <cite>Moby-Dick</cite> in the first term.</p>
cite {
font-style: normal;
text-decoration: underline;
}
Technische Zusammenfassung
Inhaltskategorien | Flussinhalte, Phrasinhalte, greifbare Inhalte. |
---|---|
Erlaubte Inhalte | Phrasinhalte. |
Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das Phrasinhalte akzeptiert. |
Implizierte ARIA-Rolle | generisch |
Erlaubte ARIA-Rollen | Beliebig |
DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-u-element |
Browser-Kompatibilität
BCD tables only load in the browser