<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 Bereich von Inline-Text dar, der in einer Weise gerendert werden sollte, die darauf hinweist, dass es eine nicht-textuelle Anmerkung hat. Dies wird standardmäßig als eine einzelne durchgehende Unterstreichung dargestellt, kann aber mit CSS geändert werden.

Warnung: In älteren Versionen von HTML wurde dieses Element als "Unterstreichen"-Element bezeichnet und wird manchmal immer noch fälschlicherweise so verwendet. Um Text zu unterstreichen, sollten Sie stattdessen einen Stil anwenden, der die CSS text-decoration Eigenschaft auf underline setzt.

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: red wavy underline;
}

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

Attribute

Dieses Element umfasst nur die globalen Attribute.

Nutzungsnotizen

Zusammen mit anderen reinen Stil-Elementen wurde das originale HTML-Unterstreichen (<u>) Element in HTML 4 als veraltet erklärt; jedoch wurde <u> in HTML 5 mit einer neuen, semantischen Bedeutung wieder eingeführt: um Text als mit irgendeiner Form nicht-textueller Anmerkung versehen zu markieren.

Hinweis: Vermeiden Sie es, das <u> Element mit seiner Standard-Formatierung (von unterstrichenem Text) in einer Weise zu verwenden, dass es mit einem Hyperlink verwechselt werden könnte, der standardmäßig ebenfalls unterstrichen ist.

Anwendungsfälle

Gültige Anwendungsfälle für das <u> Element umfassen die Kennzeichnung von Rechtschreibfehlern, das Anwenden einer Eigennamen-Markierung zur Kennzeichnung von Eigennamen im chinesischen Text und andere Formen der Anmerkung.

Sie sollten <u> nicht verwenden, um Text zwecks Präsentation 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 zum Beispiel:

  • <em> um eine Betonung auszudrücken
  • <b> um die 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 Veröffentlichungen zu kennzeichnen
  • <i> um technische Begriffe, Umschriften, Gedanken oder die Namen von Schiffen in westlichen Texten zu kennzeichnen

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

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

Beispiele

Hinweis auf einen Rechtschreibfehler

Dieses Beispiel verwendet das <u> Element und etwas CSS, um einen Absatz darzustellen, der ein falsch geschriebenes Wort enthält, wobei der Fehler im Stil einer roten, wellenförmigen Unterstreichung angezeigt wird, die 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 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 wird, es eine rote wellenförmige Unterstreichung unter seinem Text haben sollte. Dies ist eine übliche Formatierung für Rechtschreibfehler. Eine andere übliche Formatierung kann mit einer red dashed underline dargestellt werden.

Ergebnis

Das Ergebnis sollte jedem bekannt vorkommen, der eine der beliebten Textverarbeitungsprogramme von heute verwendet hat.

Vermeidung von <u>

Meistens möchten Sie <u> eigentlich nicht verwenden. Hier sind einige Beispiele, die zeigen, was Sie stattdessen in mehreren Fällen tun sollten.

Nicht-semantische Unterstreichungen

Um Text zu unterstreichen, ohne irgendeine semantische Bedeutung anzudeuten, 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

Präsentation eines Buchtitels

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

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

Die Standardstilierung für das <cite> Element gibt den Text in Kursivschrift aus. 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 Fließender Inhalt, Phrasierungsinhalt, fühlbarer Inhalt.
Erlaubter Inhalt Phrasierungsinhalt.
Tag-Auslassung Keine, sowohl der Start- als auch der Endtag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Phrasierungsinhalt akzeptiert.
Implizierte ARIA-Rolle generisch
Erlaubte 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 in der Regel stattdessen verwendet werden.
  • Die CSS text-decoration Eigenschaft sollte für nicht-semantische Unterstreichungen verwendet werden.