Das -Element kennzeichnet Text mit einer unartikulierten Annotation, also einer nicht-textuellen Anmerkung. Browser stellen  standardmäßig unterstrichen dar. Früher war  ein rein visuelles Element für Unterstreichungen, aber in HTML5 hat es eine neue semantische Bedeutung bekommen: Es markiert Text, der auf irgendeine Weise annotiert ist, zum Beispiel Rechtschreibfehler oder chinesische Eigennamen. Auf dieser Seite lernst du, wann  sinnvoll ist und warum du es mit Vorsicht einsetzen solltest.

Steckbrief

Kategorie: Text & Typografie
Art: Inline
Beispiele: 3
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 05.02.2026

Grundlagen

 ist eines der Elemente, die in HTML5 eine neue Bedeutung bekommen haben. Es steht nicht mehr für “unterstrichen”, sondern für “unartikulierte Annotation”. Das klingt kompliziert, bedeutet aber einfach: Der Text hat eine Anmerkung, die nicht durch den Text selbst ausgedrückt wird.

 ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
Browser stellen  standardmäßig unterstrichen (text-decoration: underline) dar
Die semantische Bedeutung ist eine nicht-textuelle Annotation (z.B. “hier ist ein Fehler”)
Vorsicht: Unterstrichener Text wird im Web fast immer als Link wahrgenommen. Das kann Nutzer verwirren
Typische Anwendungsfälle: Rechtschreibfehler markieren, chinesische Eigennamen kennzeichnen
Für eingefügten Text in einem Bearbeitungskontext verwende <ins> statt 
Wenn du Text nur unterstreichen willst, verwende CSS text-decoration: underline statt

Syntax

index.html

Grundsyntax

<p>Das ist ein <u>Rechtschreibfehler</u> im Text.</p>

Beispiele

3 Beispiele

Der häufigste Anwendungsfall für : Fehlerhafte Wörter im Text kennzeichnen, ähnlich wie die rote Wellenlinie in Textverarbeitungsprogrammen. Mit etwas CSS kannst du die Darstellung anpassen:

index.html

Rechtschreibfehler

<p>
  Der Satz enthält einen
  <u style="text-decoration: underline wavy red;">Rächtsschreibfehler</u>,
  der korrigiert werden sollte.
</p>

Da die Standard-Unterstreichung leicht mit Links verwechselt werden kann, ist es sinnvoll,  mit CSS anders zu gestalten. Hier ein Beispiel mit einer gepunkteten Linie in einer anderen Farbe:

index.html

Angepasstes Styling

<p>
  Die <u style="text-decoration-style: dotted; text-decoration-color: #059669;">
    Annotation
  </u>
  hebt sich deutlich von
  <a href="https://example.com">normalen Links</a> ab.
</p>

Dieses Beispiel zeigt das Problem: Unterstrichener Text sieht fast identisch aus wie ein Link. Nutzer könnten versuchen, darauf zu klicken, und wären frustriert, wenn nichts passiert:

index.html

Verwechslungsgefahr

<!-- Ein echter Link: Nutzer erwarten, dass unterstrichener Text klickbar ist -->
<p>Klicke auf <a href="https://example.com">diesen Link</a>, um mehr zu erfahren.</p>

<!-- Kein Link, aber optisch fast identisch. Das verwirrt -->
<p>Dieser <u>unterstrichene Text</u> ist kein Link, sieht aber fast so aus.</p>

Barrierefreiheit

3 Punkte

Screenreader-Verhalten: Die meisten Screenreader ignorieren  und lesen den Text ohne besondere Ankündigung vor. Der Nutzer erfährt nicht, dass der Text unterstrichen oder annotiert ist.
Verwechslungsgefahr mit Links: Sehende Nutzer assoziieren unterstrichenen Text fast immer mit Links. Wenn du  verwendest, sorge mit CSS dafür, dass sich die Darstellung klar von Links unterscheidet (z.B. andere Farbe, gepunktete Linie).
Zusätzlichen Kontext bieten: Wenn die Annotation wichtig ist (z.B. “hier ist ein Fehler”), reicht  allein nicht aus. Ergänze einen erklärenden Text oder verwende aria-describedby, damit auch Screenreader-Nutzer die Information erhalten.

Häufige Fehler

3 Punkte

u als Styling-Element verwenden:  sollte nicht verwendet werden, nur weil du Text unterstrichen darstellen willst. Dafür gibt es CSS text-decoration: underline. Das -Element hat eine semantische Bedeutung (Annotation) und sollte nur dafür eingesetzt werden.
u nicht von Links unterscheidbar machen: Wenn du  verwendest und die Standard-Unterstreichung beibehältst, sieht der Text fast identisch aus wie ein Link. Passe das Styling an (Farbe, Linienart), damit Nutzer sofort erkennen, dass es kein klickbarer Link ist.
u statt ins verwenden: Wenn du Text markieren willst, der in ein Dokument eingefügt wurde (z.B. bei einer Textüberarbeitung), verwende <ins>.  ist für allgemeine Annotationen gedacht, <ins> explizit für Einfügungen.

Browser-Kompatibilität

5 von 5

Das u-Element wird von allen Browsern seit den Anfängen des Webs unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

Das u-Element wird in allen gängigen Email-Clients als unterstrichener Text dargestellt.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Komplett
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<u>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter