<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 Bereich von Inline-Text, der in einer Weise dargestellt werden soll, die darauf hinweist, dass eine nicht-textuelle Annotation vorhanden ist. Standardmäßig wird dies als eine einfache solide Unterstreichung dargestellt, kann jedoch mithilfe von CSS verändert werden.

Warnung: Dieses Element wurde in älteren HTML-Versionen als "Underline"-Element bezeichnet und wird manchmal noch fälschlicherweise so verwendet. Um Text zu unterstreichen, sollten Sie stattdessen einen Stil anwenden, der die CSS text-decoration Eigenschaft 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 Verwendungsnotizen für weitere Details darüber, wann es angemessen ist, <u> zu verwenden und wann nicht.

Attribute

Dieses Element enthält nur die globalen Attribute.

Verwendungsnotizen

Zusammen mit anderen rein stilistischen Elementen wurde das ursprüngliche HTML Unterstreichungs- (<u>) Element in HTML 4 als veraltet eingestuft; jedoch wurde <u> in HTML 5 mit einer neuen, semantischen Bedeutung wiederhergestellt: um Text zu kennzeichnen, für den eine Form nicht-textueller Annotation angewendet wurde.

Hinweis: Vermeiden Sie die Verwendung des <u> Elements mit seiner Standarddarstellung (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 einer Eigennamen-Markierung zur Kennzeichnung von Eigennamen im Chinesischen und andere Formen der Annotation.

Sie sollten <u> nicht verwenden, um Text zu Präsentationszwecken zu unterstreichen oder um Buchtitel zu kennzeichnen.

Andere zu berücksichtigende Elemente

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

  • <em>, um hervorgehobene Betonung anzuzeigen
  • <b>, um Aufmerksamkeit auf Text zu lenken
  • <mark>, um Schlüsselwörter oder -sätze zu markieren
  • <strong>, um anzuzeigen, dass Text von großer Bedeutung ist
  • <cite>, um Titel von Büchern oder anderen Veröffentlichungen zu kennzeichnen
  • <i>, um technische Begriffe, Transliterationen, Gedanken oder Schiffsnamen in westlichen Texten zu bezeichnen

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

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

Beispiele

Kennzeichnen eines Rechtschreibfehlers

Dieses Beispiel verwendet das <u> Element und einige CSS, um einen Absatz anzuzeigen, der einen falsch geschriebenen Fehler enthält, wobei der Fehler im Stil einer roten wellenförmigen Unterstreichung, die ziemlich häufig für diesen Zweck verwendet wird, dargestellt 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 zur Kennzeichnung des Rechtschreibfehlers des Wortes "wrongly" dient.

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 wellenförmige Unterstreichung unter seinem Text haben sollte. Dies ist eine gängige Gestaltung für Rechtschreibfehler. Ein anderer üblicher Stil kann mit einer roten gestrichelten Unterstreichung dargestellt werden.

Ergebnis

Das Ergebnis sollte jedem vertraut sein, der einen der heute verfügbaren beliebten Textverarbeitungsprogramme verwendet.

Vermeidung von <u>

Meistens möchten Sie <u> tatsächlich 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 semantische Bedeutung implizieren zu wollen, verwenden Sie ein <span> -Element mit der text-decoration Eigenschaft, die auf "underline" gesetzt ist, 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

Präsentation eines Buchtitels

Buchtitel sollten mit dem <cite> -Element präsentiert werden, anstatt <u> oder sogar <i>.

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

Die Standarddarstellung des <cite> Elements gibt den Text in Kursivschrift wieder. Sie können dies mit CSS übersteuern:

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, Phrasing-Inhalt, wahrnehmbarer Inhalt.
Zulässiger Inhalt Phrasing-Inhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Zulässige Eltern Jedes Element, das Phrasing-Inhalt akzeptiert.
Implizierte ARIA-Rolle generisch
Zulässige ARIA-Rollen Jede
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-u-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

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