<u>: Das unabgegrenzte Anmerkungselement (Underline)

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 Bereich von Inline-Text, der auf eine Weise gerendert werden sollte, die anzeigt, dass es eine nicht-textuelle Anmerkung hat. Standardmäßig wird dies als ein einfacher durchgehender Unterstrich gerendert, aber es kann mithilfe von CSS geändert werden.

Warnung: Dieses Element wurde in älteren HTML-Versionen als "Underline"-Element (Unterstreichen) bezeichnet und wird manchmal immer noch fälschlicherweise auf diese Weise 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

<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 Nutzungs-Hinweise für weitere Details darüber, wann es angemessen ist, <u> zu verwenden und wann nicht.

Attribute

Dieses Element beinhaltet nur die globalen Attribute.

Nutzungs-Hinweise

Zusammen mit anderen reinen Stilelementen wurde das ursprüngliche HTML-Unterstreichungselement (<u>) in HTML 4 abgeschafft; jedoch wurde <u> in HTML 5 mit einer neuen, semantischen Bedeutung wiederhergestellt: um Text als mit irgendeiner Form von nicht-textueller Anmerkung versehen zu markieren.

Hinweis: Vermeiden Sie die Verwendung des <u>-Elements mit seinem Standard-Styling (von unterstrichenem Text) auf eine Weise, die mit einem Hyperlink verwechselt werden kann, der ebenfalls standardmäßig unterstrichen ist.

Anwendungsfälle

Gültige Anwendungsfälle für das <u>-Element umfassen das Kennzeichnen von Rechtschreibfehlern, das Anwenden eines Eigenname-Zeichens, um Eigennamen in chinesischem Text zu kennzeichnen, und andere Formen der Anmerkung.

Sie sollten <u> nicht verwenden, um Text zu Unterstreichungszwecken für Präsentationen oder um Buchtitel anzugeben.

Andere zu verwendende Elemente

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

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

Um textuelle Anmerkungen bereitzustellen (anstelle der nicht-textuellen Anmerkungen, die mit <u> erstellt werden), verwenden Sie das <ruby>-Element.

Um eine unterstrichene Darstellung ohne jede semantische Bedeutung anzuwenden, verwenden Sie den Wert underline der text-decoration-Eigenschaft.

Beispiele

Hinweis auf einen Schreibfehler

Dieses Beispiel benutzt das <u>-Element und ein wenig CSS, um einen Absatz anzuzeigen, der einen falsch geschriebenen Fehler enthält, wobei der Fehler im roten gewellten Unterstreichungsstil angezeigt wird, der häufig für diesen Zweck 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, wenn das <u>-Element mit der Klasse spelling gestylt ist, es einen roten gewellten Unterstrich unter seinem Text haben sollte. Dies ist ein üblicher Stil für Rechtschreibfehler. Ein weiterer üblicher Stil kann durch red dashed underline dargestellt werden.

Ergebnis

Das Ergebnis sollte jedem vertraut sein, der eine der populäreren Textbearbeitungsprogramme verwendet hat, die heute verfügbar sind.

Vermeiden von <u>

Die meiste Zeit möchte man 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 zu unterstreichen, ohne eine semantische Bedeutung zu implizieren, verwenden Sie ein <span>-Element mit der text-decoration-Eigenschaft 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> zu verwenden.

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

Das Standard-Styling für das <cite>-Element rendert den Text in Kursivschrift. Sie können das 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, Textinhalt, fühlbarer Inhalt.
Erlaubter Inhalt Textinhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Textinhalt akzeptiert.
Implizierte ARIA-Rolle generisch
Erlaubte ARIA-Rollen Jede
DOM Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-u-element

Browser-Kompatibilität

Siehe auch

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