HTML <strike>-Tag
Das veraltete HTML <strike>-Tag erzeugte durchgestrichenen Text. Erfahren Sie, warum es entfernt wurde und wie Sie es durch <s>, <del> oder CSS ersetzen.
Das <strike>-Tag wurde früher verwendet, um Text mit einer horizontalen Linie in der Mitte darzustellen (Durchstreichung).
Das <strike>-Element ist ein veraltetes HTML-Tag und ist in HTML5 obsolet. Verwenden Sie es nicht in neuen Dokumenten. Nutzen Sie stattdessen <del>, <s> oder CSS.
Diese Seite erklärt, was <strike> bewirkt hat, warum es entfernt wurde und — vor allem — was Sie stattdessen verwenden sollten. Ob Sie <del>, <s> oder einfaches CSS wählen sollten, hängt davon ab, was die Durchstreichung bedeutet. Jede Alternative wird daher mit einem funktionierenden Beispiel gezeigt.
Warum <strike> entfernt wurde
HTML5 hat <strike> entfernt, weil es nur beschrieb, wie Text aussehen soll, nicht was er bedeutet. Modernes HTML trennt Bedeutung (Markup) von Darstellung (CSS). Eine Linie durch Text kann sehr unterschiedliche Dinge bedeuten:
- Der Text wurde bei einer Bearbeitung gelöscht → verwenden Sie
<del>(oft zusammen mit<ins>für den Ersatztext). - Der Text ist nicht mehr aktuell oder relevant, wird aber aus Kontext beibehalten → verwenden Sie
<s>. - Die Linie ist rein visuell ohne semantische Bedeutung → verwenden Sie die CSS-Eigenschaft
text-decoration: line-through.
Die Wahl des richtigen Elements hilft auch Hilfstechnologien und Suchmaschinen, Ihren Inhalt zu verstehen — etwas, das ein generisches <strike> nie leistete.
Wie das alte <strike> aussah
Das <strike>-Tag wurde paarweise verwendet, mit Inhalt zwischen dem öffnenden (<strike>) und schließenden (</strike>) Tag. Browser rendern es noch für Legacy-Support, aber Sie sollten keinen neuen Code wie diesen schreiben:
<!-- Obsolete — do not use in new documents -->
<p><strike>I am studying at the school.</strike></p>
<p>I am studying at the university.</p>
Migration von <strike>
Ersetzen Sie jedes <strike> basierend auf der Bedeutung des durchgestrichenen Textes.
Option 1: <del> für gelöschten Inhalt (mit <ins>)
Verwenden Sie <del>, wenn Text bei einer Bearbeitung entfernt wurde. Kombinieren Sie es mit <ins>, um den Ersatz zu zeigen — ein klassisches Beispiel ist ein rabattierter Preis.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Price: <del>$50.00</del> <ins>$39.99</ins></p>
</body>
</html>Der alte Preis ist als gelöscht markiert und der neue als eingefügt — die Beziehung zwischen ihnen ist nun bedeutungstragend, nicht nur visuell.
Option 2: <s> für nicht mehr relevanten Inhalt
Verwenden Sie <s> für Inhalte, die nicht mehr korrekt oder relevant sind, aber aus Kontext auf der Seite verbleiben — zum Beispiel ein erledigtes oder nicht verfügbares Element in einer Liste. Es ist nicht für Dokumentbearbeitungen gedacht; verwenden Sie dafür <del>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li><s>Buy milk</s> (already done)</li>
<li>Buy bread</li>
<li>Buy eggs</li>
</ul>
</body>
</html>Option 3: CSS line-through für rein visuelle Durchstreichung
Wenn die Linie keine semantische Bedeutung hat, verwenden Sie die CSS-Eigenschaft text-decoration auf einem nicht-semantischen Element wie <span> oder <p>. Formatieren Sie niemals das veraltete strike-Element — wenden Sie die Regel stattdessen auf gültiges Markup an.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.struck {
text-decoration: line-through;
}
</style>
</head>
<body>
<p><span class="struck">I am studying at the school.</span></p>
<p>I am studying at the university.</p>
</body>
</html>