<u>: Das unausgesprochene Anmerkungselement (Unterstrichen)

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 eine Spanne von Inline-Text, die so gerendert werden sollte, dass angezeigt wird, dass sie eine nicht-textuelle Anmerkung enthält. Dies wird standardmäßig als ein einfacher fester Unterstrich dargestellt, kann jedoch mithilfe von CSS geändert werden.

Warnung: Dieses Element wurde in älteren Versionen von HTML als "Unterstrich"-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 auf underline gesetzt enthält.

Probieren Sie es aus

<p>
  You could use this element to highlight <u>speling</u> mistakes, so the writer
  can <u>corect</u> them.
</p>

p {
  margin: 0;
}

u {
  text-decoration: #f00 wavy underline;
}

Siehe den Abschnitt Nutzungshinweise für weitere Details, wann es geeignet ist, <u> zu verwenden und wann nicht.

Attribute

Dieses Element umfasst nur die globalen Attribute.

Nutzungshinweise

Zusammen mit anderen rein stilistischen Elementen 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 einer Form von nicht-textueller Anmerkung versehen zu kennzeichnen.

Hinweis: Vermeiden Sie die Verwendung des <u>-Elements mit seiner Standardstyling (als unterstrichener Text) in einer Weise, die mit einem Hyperlink verwechselt werden kann, welcher standardmäßig auch unterstrichen ist.

Anwendungsfälle

Gültige Anwendungsfälle für das <u> Element umfassen die Annotation von Rechtschreibfehlern, das Anwenden eines Eigenzeichen zur Kennzeichnung von Eigennamen im chinesischen Text und andere Formen von Anmerkungen.

Sie sollten <u> nicht verwenden, um Text aus Präsentationsgründen zu unterstreichen oder um Titel von Büchern zu kennzeichnen.

Andere in Betracht zu ziehende Elemente

In den meisten Fällen sollten Sie ein anderes Element als <u> verwenden, wie zum Beispiel:

  • <em> um Betonung zu kennzeichnen
  • <b> um die Aufmerksamkeit auf den Text zu lenken
  • <mark> um Schlüsselwörter oder -phrasen zu markieren
  • <strong> um anzuzeigen, dass Text von großer Bedeutung ist
  • <cite> um Titel von Büchern oder anderen Publikationen zu kennzeichnen
  • <i> um technische Begriffe, Transliteration, Gedanken oder Namen von Schiffen in westlichen Texten zu kennzeichnen

Um textuelle Anmerkungen zu geben (im Gegensatz zu den nicht-textuellen Anmerkungen, die mit <u> erstellt werden), verwenden Sie das <ruby> Element.

Um ein unterstrichenes Erscheinungsbild ohne besondere semantische Bedeutung zu erzielen, verwenden Sie den Wert underline der CSS-Eigenschaft text-decoration.

Beispiele

Kennzeichnung eines Rechtschreibfehlers

Dieses Beispiel verwendet das <u> Element und einige CSS, um einen Absätz darzustellen, der einen falsch geschriebenen Fehler enthält, wobei der Fehler im roten gewellten Unterstrichstil angezeigt wird, der für diesen Zweck ziemlich gebräuchlich ist.

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 gestylt ist, es einen roten gewellten Unterstrich unterhalb seines Textes haben soll. Dies ist eine übliche Stilform für Rechtschreibfehler. Ein weiterer üblicher Stil kann mit red dashed underline präsentiert werden.

Ergebnis

Das Ergebnis sollte jedem vertraut sein, der eine der heute verfügbaren, populären Textverarbeitungsprogramme verwendet hat.

Vermeidung von <u>

In den meisten Fällen wollen Sie eigentlich <u> nicht verwenden. Hier sind einige Beispiele, die zeigen, was Sie stattdessen in verschiedenen Fällen tun sollten.

Nicht-semantische Unterstreichungen

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 mit <u> oder sogar <i>.

Verwendung des cite Elements
html
<p>The class read <cite>Moby-Dick</cite> in the first term.</p>
Stil des cite Elements

Das Standard-Styling für das <cite> Element rendert den Text kursiv. Sie können dies mit 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 Flussinhalt, Phrasierungsinhalt, greifbarer Inhalt.
Zulässiger Inhalt Phrasierungsinhalt.
Tag-Auslassung Keine, sowohl der Start- als auch der End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phrasierungsinhalt akzeptiert.
Implizierte ARIA-Rolle generisch
Zulässige ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-u-element

Browser-Kompatibilität

Siehe auch

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