<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

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

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
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 und nicht mit <u> oder sogar <i> präsentiert werden.

Verwendung des cite-Elements
html
<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:

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 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

Siehe auch

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