HTML <s> Tag
Das HTML <s>-Tag markiert nicht mehr zutreffenden Text (z. B. einen alten Preis). Unterschied zu <del> und <strike> mit Beispielen.
Das HTML-Tag <s> markiert Text, der nicht mehr korrekt oder relevant ist — aber nicht buchstäblich aus dem Dokument gelöscht wurde. Es ist ein Inline-Element, und Browser stellen seinen Inhalt standardmäßig mit einem Durchstreichungseffekt dar (eine horizontale Linie durch den Text).
Ein klassisches Anwendungsbeispiel ist das Anzeigen eines reduzierten Preises: Der alte Preis bleibt sichtbar, aber durchgestrichen, neben dem aktuellen Angebotspreis. Das signalisiert dem Leser: „Das war früher so; jetzt gilt das hier."
<s> ist ein gültiges HTML5-Element — es ist nicht veraltet. Das veraltete Tag ist <strike>, das man auf neuen Seiten niemals verwenden sollte. Verwende stattdessen <s> (Semantik) oder CSS text-decoration: line-through (rein visuell).
Syntax
Das <s>-Tag wird paarweise verwendet. Der Inhalt steht zwischen dem öffnenden (<s>) und dem schließenden (</s>) Tag.
Beispiel — Durchgestrichener Preis
Dies ist die häufigste, idiomatische Verwendung von <s>: Der ursprüngliche Preis ist nicht mehr gültig und wird daher durchgestrichen, während der Angebotspreis als aktuell angezeigt wird.
HTML <s> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
Hurry, sale ends soon!
<s>Was $50.00</s>
<strong>Now $29.99</strong>
</p>
</body>
</html>Ergebnis
<s> vs. <del> vs. <strike>
Alle drei Tags erzeugen eine Linie durch den Text, bedeuten jedoch sehr unterschiedliche Dinge. Die richtige Wahl macht das HTML semantisch statt nur optisch dekoriert.
| Tag | Bedeutung | Verwenden wenn… | Status |
|---|---|---|---|
<s> | Inhalt ist nicht mehr korrekt oder relevant | Ein alter Preis, ein veraltetes Detail, eine Empfehlung, die sich geändert hat — der ursprüngliche Text wurde nie „entfernt", er ist nur überholt. | Gültiges HTML5 |
<del> | Inhalt wurde gelöscht / entfernt als redaktionelle Änderung | Nachverfolgung von Dokumentenbearbeitungen. Wird natürlich mit <ins> für eingefügten Text kombiniert. Unterstützt cite und datetime, um warum und wann festzuhalten. | Gültiges HTML5 |
<strike> | Durchstreichen (nur Darstellung) | Niemals — verwende stattdessen <s> oder <del>. | Veraltet |
Kurz gesagt: Verwende <s>, wenn die Bedeutung „das ist nicht mehr der Fall" ist, und <del>, wenn die Bedeutung „das wurde herausgestrichen" ist. Wenn nur die visuelle Linie benötigt wird und keine besondere Bedeutung dahintersteckt, verwende CSS text-decoration: line-through auf einem einfachen Element.
Barrierefreiheit
Standardmäßig kündigen Screenreader die Durchstreichung nicht an — Hilfstechnologien lesen <s>-Inhalt genauso wie jeden anderen Text. Ein sehender Benutzer sieht „Was $50.00" durchgestrichen, aber ein Screenreader-Benutzer hört möglicherweise nur „Was $50.00" ohne Hinweis darauf, dass dies veraltet ist.
Für Fälle, in denen der durchgestrichene Zustand eine wichtige Bedeutung hat, sollte visuell verborgener Text ergänzt werden, der dies verdeutlicht:
<p>
<s><span class="visually-hidden">Old price: </span>Was $50.00</s>
<strong>Now $29.99</strong>
</p>.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}Attribute
Das <s>-Tag unterstützt die globalen Attribute und die Ereignisattribute. Es hat keine eigenen Attribute.
Styling
Browser wenden text-decoration: line-through bereits auf <s> an, daher ist kein CSS erforderlich, um die Linie zu erhalten. Styling ist eine optionale Anpassung — zum Beispiel, um den durchgestrichenen Text einzufärben, ohne die Linie neu zu deklarieren:
s {
color: gray;
}