<u>: Das nicht artikulierte Anmerkungselement (Unterstreichen)
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 stellt einen Abschnitt von Inline-Text dar, der so gerendert werden soll, dass er eine nicht-textliche Anmerkung andeutet. Standardmäßig wird dies als ein einzelner durchgehender Unterstrich dargestellt, kann jedoch mithilfe von CSS verändert werden.
Warnung: Dieses Element wurde in älteren Versionen von HTML als das "Underline"-Element bezeichnet und wird manchmal immer noch fälschlicherweise so verwendet. Um Text zu unterstreichen, sollten Sie stattdessen einen Stil anwenden, der die CSS-Eigenschaft text-decoration
mit dem Wert underline
enthält.
Probieren Sie es aus
Siehe den Abschnitt Verwendungsnotizen für weitere Informationen darüber, wann es angebracht ist, <u>
zu verwenden und wann nicht.
Attribute
Dieses Element enthält nur die globalen Attribute.
Verwendungsnotizen
Zusammen mit anderen reinen Stilelementen wurde das ursprüngliche HTML-Unterstrich (<u>
) Element in HTML 4 abgelehnt; jedoch wurde <u>
in HTML 5 mit einer neuen, semantischen Bedeutung wiederhergestellt: um Text als mit irgendeiner Form nicht-textueller Anmerkung versehen zu kennzeichnen.
Hinweis: Vermeiden Sie die Verwendung des <u>
-Elements mit seiner Standard-Stilierung (unterstrichener Text) auf eine Weise, die mit einem Hyperlink verwechselt werden könnte, der standardmäßig ebenfalls unterstrichen ist.
Anwendungsfälle
Gültige Anwendungsfälle für das <u>
-Element beinhalten die Kennzeichnung von Rechtschreibfehlern, das Anwenden eines richtigen Namenszeichens, um Eigennamen im chinesischen Text zu kennzeichnen, und andere Formen der Anmerkung.
Sie sollten <u>
nicht verwenden, um Text zu Präsentationszwecken zu unterstreichen oder um Buchtitel anzugeben.
Andere Elemente, die in Betracht gezogen werden können
In den meisten Fällen sollten Sie ein anderes Element als <u>
verwenden, wie:
<em>
um betonte Betonung anzuzeigen<b>
um Aufmerksamkeit auf Text zu lenken<mark>
um Schlüsselwörter oder Phrasen zu markieren<strong>
um anzuzeigen, dass Text von großer Bedeutung ist<cite>
um die Titel von Büchern oder anderen Publikationen zu markieren<i>
um technische Begriffe, Umschreibungen, Gedanken oder Namen von Schiffen in westlichen Texten zu kennzeichnen
Um textliche Anmerkungen bereitzustellen (im Gegensatz zu den nicht-textlichen Anmerkungen, die mit <u>
erstellt werden), verwenden Sie das <ruby>
-Element.
Um ein unterstrichenes Erscheinungsbild ohne semantische Bedeutung anzuwenden, verwenden Sie den Wert underline
der CSS-Eigenschaft text-decoration
.
Beispiele
Kennzeichnung eines Rechtschreibfehlers
Dieses Beispiel verwendet das <u>
-Element und etwas CSS, um einen Absatz anzuzeigen, der einen falsch geschriebenen Fehler enthält, wobei der Fehler im Stil eines roten, welligen Unterstrichs angezeigt wird, der für diesen Zweck ziemlich 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 den Rechtschreibfehler des Wortes "wrongly" anzuzeigen.
CSS
u.spelling {
text-decoration: red wavy underline;
}
Dieses CSS gibt an, dass wenn das <u>
-Element mit der Klasse spelling
formatiert ist, es unter seinem Text einen roten, welligen Unterstrich haben soll. Dies ist eine übliche Stilistik für Rechtschreibfehler. Ein weiterer gängiger Stil kann mit rotem gestricheltem Unterstrich
dargestellt werden.
Ergebnis
Das Ergebnis sollte jedem vertraut sein, der einen der heute verfügbaren beliebteren Textverarbeitungsprogramme verwendet hat.
Vermeidung von <u>
Die meiste Zeit möchten Sie tatsächlich kein <u>
verwenden. Hier sind einige Beispiele, die zeigen, was Sie stattdessen in mehreren Fällen tun sollten.
Nicht-semantische Unterstriche
Um Text zu unterstreichen, ohne eine semantische Bedeutung zu implizieren, verwenden Sie ein <span>
-Element mit der CSS-Eigenschaft text-decoration
auf "underline"
gesetzt, 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 dargestellt werden, anstatt <u>
oder sogar <i>
.
Verwendung des cite-Elements
<p>The class read <cite>Moby-Dick</cite> in the first term.</p>
Gestaltung des cite-Elements
Die standardmäßige Gestaltung für das <cite>
-Element rendert den Text in Kursivschrift. Sie können dies mittels 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 | Flow-Inhalt, Phrasing-Inhalt, greifbarer Inhalt. |
---|---|
Erlaubter Inhalt | Phrasing-Inhalt. |
Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind erforderlich. |
Erlaubte Eltern-Elemente | Jedes Element, das Phrasing-Inhalt akzeptiert. |
Implizierte ARIA-Rolle | generic |
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