<u>

Zuletzt aktualisiert am 5. Februar 2026

Das <u>-Element kennzeichnet Text mit einer unartikulierten Annotation — also einer nicht-textuellen Anmerkung. Browser stellen <u> standardmäßig unterstrichen dar. Früher war <u> 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 <u> sinnvoll ist und warum du es mit Vorsicht einsetzen solltest.

Grundlagen

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

• <u> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
• Browser stellen <u> 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 <u>
• Wenn du Text nur unterstreichen willst, verwende CSS text-decoration: underline statt <u>

Syntax

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

Beispiele

Rechtschreibfehler markieren

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

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

u mit angepasstem Styling

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

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

Verwechslungsgefahr mit Links

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:

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

• Screenreader-Verhalten: Die meisten Screenreader ignorieren <u> 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 <u> 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 <u> allein nicht aus. Ergänze einen erklärenden Text oder verwende aria-describedby, damit auch Screenreader-Nutzer die Information erhalten.

Häufige Fehler

• u als Styling-Element verwenden: <u> sollte nicht verwendet werden, nur weil du Text unterstrichen darstellen willst. Dafür gibt es CSS text-decoration: underline. Das <u>-Element hat eine semantische Bedeutung (Annotation) und sollte nur dafür eingesetzt werden.

• u nicht von Links unterscheidbar machen: Wenn du <u> 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>. <u> ist für allgemeine Annotationen gedacht, <ins> explizit für Einfügungen.

Browser-Kompatibilität

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

Email-Kompatibilität

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

Verwandte Elemente