<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

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

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
html
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
CSS
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
html
<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:

html
<p>The class read <cite>Moby-Dick</cite> in the first term.</p>
css
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

Siehe auch

  • Die <span>, <i>, <em>, <b>, und <cite> Elemente sollten normalerweise stattdessen verwendet werden.
  • Die CSS-Eigenschaft text-decoration sollte für nicht-semantische Unterstreichungen verwendet werden.