<s>

Zuletzt aktualisiert am 5. Februar 2026

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.

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

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

Beispiele

Preisänderung anzeigen

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

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

Veraltete Information

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:

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

s vs. del: der Unterschied

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

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

• 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

• 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

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

Email-Kompatibilität

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

Verwandte Elemente