<s>

Das <s>-Element kennzeichnet Text, der nicht mehr korrekt oder relevant ist. Browser stellen <s> standardmäßig durchgestrichen dar. Ein typisches Beispiel: Ein alter Preis, der durchgestrichen neben dem neuen Preis steht. Wichtig ist die Abgrenzung zu <del>: Während <s> sagt “diese Information trifft nicht mehr zu”, sagt <del> “dieser Text wurde aus dem Dokument entfernt”. Auf dieser Seite lernst du, wann du <s> einsetzt und worin der Unterschied zu <del> liegt.

Steckbrief <s>

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

Grundlagen

<s> und <del> sehen im Browser identisch aus: beide erzeugen durchgestrichenen Text. Der Unterschied ist semantisch: <s> markiert Inhalte, die nicht mehr zutreffend sind, aber noch sichtbar bleiben sollen. <del> hingegen gehört in einen Bearbeitungskontext und zeigt an, dass Text aus einem Dokument gelöscht wurde.

<s> ist ein Inline-Element: Es fließt im Text mit und erzeugt keinen Zeilenumbruch
Browser stellen <s> standardmäßig durchgestrichen (text-decoration: line-through) dar
Die semantische Bedeutung: “Diese Information ist nicht mehr gültig oder relevant”
Typische Anwendungsfälle: Alte Preise, überholte Informationen, erledigte Aufgaben (in einfachen Listen)
Für gelöschten Text in einem Bearbeitungskontext (z.B. Dokument-Revisionen) verwende <del> statt <s>
<s> ist nicht veraltet: es wurde in HTML5 mit einer neuen semantischen Bedeutung neu definiert

Syntax

index.html

Grundsyntax

<p>Alter Preis: <s>49,99 €</s>. Neuer Preis: 29,99 €</p>

Beispiele

3 Beispiele

Der häufigste Anwendungsfall: Ein alter Preis wird durchgestrichen neben dem neuen Preis angezeigt. Das ist auf fast jeder Shop-Seite zu sehen:

index.html

Preisänderung

<p>
  <s style="color: #6b7280;">79,99 €</s>
  <span style="color: #dc2626; font-weight: bold;">49,99 €</span>
  <span style="background: #dc2626; color: white; padding: 2px 8px;">
    -38%
  </span>
</p>

Wenn eine Information nicht mehr aktuell ist, aber noch sichtbar bleiben soll (z.B. weil sie für den Kontext wichtig ist), ist <s> die richtige Wahl:

index.html

Veraltete Information

<p><s>Die Veranstaltung findet am 15. März statt.</s></p>
<p><strong>Update:</strong> Die Veranstaltung wurde auf den 22. März verschoben.</p>

Beide erzeugen durchgestrichenen Text, aber in unterschiedlichem Kontext. <s> = “trifft nicht mehr zu”, <del> = “wurde aus dem Dokument entfernt”:

index.html

s vs. del

<!-- s: Der alte Preis trifft nicht mehr zu, bleibt aber sichtbar -->
<p>Preis: <s>99,99 €</s> 59,99 €</p>

<!-- del + ins: Text wurde im Dokument ersetzt (Bearbeitungskontext) -->
<p>
  Bitte senden Sie die Unterlagen an
  <del>info@alt.de</del> <ins>kontakt@neu.de</ins>.
</p>

Barrierefreiheit

3 Punkte

Screenreader-Verhalten: Das Verhalten ist inkonsistent. Manche Screenreader (z.B. NVDA, JAWS) kündigen durchgestrichenen Text an, andere ignorieren <s> komplett. Du solltest dich nicht darauf verlassen, dass die Durchstreichung kommuniziert wird.
Kontext bieten: Wenn die Information “nicht mehr gültig” für das Verständnis wichtig ist, ergänze einen erklärenden Text. Statt nur <s>49,99 €</s> 29,99 € schreibe besser Alter Preis: <s>49,99 €</s>. Neuer Preis: 29,99 €, damit auch Screenreader-Nutzer den Kontext verstehen.
Visuell nicht ausreichend: Durchgestrichener Text kann für Menschen mit Sehbeeinträchtigungen schwer zu erkennen sein. Ergänze die Darstellung bei wichtigen Informationen mit Farbe oder zusätzlichem Text.

Häufige Fehler

3 Punkte

s statt del im Bearbeitungskontext: Wenn du Text markierst, der aus einem Dokument gelöscht wurde (z.B. bei einer Textüberarbeitung), verwende <del> statt <s>. <del> kann zusätzlich ein datetime-Attribut tragen, um den Zeitpunkt der Löschung anzugeben.
s für rein visuelles Styling: Wenn du Text nur durchgestrichen darstellen willst, ohne dass er “nicht mehr gültig” ist, verwende CSS text-decoration: line-through. Das <s>-Element hat eine semantische Bedeutung und sollte nur dafür verwendet werden.
Fehlender Kontext für den neuen Wert: Wenn du einen alten Preis mit <s> markierst, stelle sicher, dass der neue Preis direkt daneben steht. Nur durchgestrichener Text ohne Alternative lässt den Nutzer ratlos zurück.

Browser-Kompatibilität

5 von 5

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

4 von 5

Das s-Element wird in den meisten Email-Clients als durchgestrichener Text dargestellt. In einigen älteren Outlook-Versionen kann die Darstellung abweichen.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

Ältere Versionen (2007-2016) ignorieren text-decoration teilweise
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

<s>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter