Durchgestrichener Text in HTML: Das Strikethrough-Element richtig einsetzen

Wenn ich durchgestrichenen Text in HTML nutze, dann nicht, weil es hübsch aussieht. Ich nutze ihn, wenn ich etwas klar als entfernt, korrigiert oder nicht mehr gültig markieren will. Genau dafür ist das Strikethrough-Element da.

Viele werfen dafür einfach CSS an. Kann man machen. Aber wenn der Inhalt semantisch wirklich „nicht mehr gültig“ ist, ist HTML die bessere Wahl. In diesem Artikel zeige ich dir, was das Element kann, wann du es verwenden solltest und wann du es lieber lässt.

Was ist durchgestrichener Text in HTML?

Der Standardweg für durchgestrichenen Text ist das <del>-Element. Es signalisiert: Dieser Inhalt wurde entfernt oder ersetzt. Das ist der saubere, semantische Weg.

Beispiel:

<p>Der alte Preis war <del>49,99 €</del>, jetzt kostet das Produkt 29,99 €. </p>

Im Browser erscheint der alte Preis durchgestrichen. Für Menschen ist das sofort verständlich. Für Suchmaschinen und Screenreader ist die Bedeutung ebenfalls klarer als bei reinem Styling.

Strikethrough-Element: <del> oder <s>?

Hier wird es wichtig. Es gibt zwei ähnliche Tags:

• <del> = Inhalt wurde aus dem Dokument entfernt.
• <s> = Inhalt ist nicht mehr relevant oder nicht mehr korrekt, bleibt aber im Text stehen.

Ich halte die Regel einfach:

• Benutze <del>, wenn du eine echte Änderung markierst.
• Benutze <s>, wenn etwas gestrichen, aber weiterhin sichtbar bleiben soll.

Wenn du ein altes Angebot, einen veralteten Preis oder eine korrigierte Formulierung zeigst, ist <del> meistens die bessere Wahl.

Wann ich durchgestrichenen Text in HTML einsetze

Ich nutze das Element in diesen Fällen:

• Preisänderungen – alter Preis wird sichtbar durchgestrichen.
• Korrekturen – falsche Information wird ersetzt.
• Versionierung – Inhalte wurden geändert, alte Version bleibt nachvollziehbar.
• Redaktionelle Hinweise – etwas gilt nicht mehr, soll aber lesbar bleiben.

Das ist besonders nützlich in Shops, Blogs, Produktseiten und Dokumentationen. Ich will dem Nutzer nicht nur das Ergebnis zeigen, sondern auch die Änderung. Das schafft Klarheit.

So schreibe ich das Strikethrough-Element richtig

Die Syntax ist simpel. Genau deshalb sehe ich hier oft schlechte Umsetzung. Viele machen es kompliziert, obwohl es nicht kompliziert ist.

<del>Alter Text</del>

Oder mit einem ersetzenden Text direkt daneben:

<p>Früher: <del>Basic Plan</del> — heute: Pro Plan</p>

Wenn du dem Nutzer mehr Kontext geben willst, kannst du das cite-Attribut nutzen. Damit kannst du die Quelle der Änderung angeben. Das ist vor allem in redaktionellen oder rechtlich sensiblen Inhalten hilfreich.

<del cite="https://example.com/aenderung">Alter Abschnitt</del>

Wichtig: Ich würde cite nur dann setzen, wenn es wirklich eine sinnvolle Referenz gibt. Kein Deko-Attribut.

Strikethrough per CSS: Wann ich es trotzdem nutze

Manchmal will ich nur das Aussehen, nicht die Semantik. Dann kann CSS reichen.

.strike {
  text-decoration: line-through;
}

Das ist okay für visuelle Effekte. Aber wenn der Text inhaltlich entfernt oder ungültig ist, ist CSS alleine nicht genug. Ich trenne da klar:

• CSS = Optik
• <del> / <s> = Bedeutung

Wenn du SEO und Barrierefreiheit ernst nimmst, nimm die semantische Lösung, wenn sie passt.

Ist durchgestrichener Text in HTML schlecht für SEO?

Nein. Nicht automatisch. Suchmaschinen verstehen den Kontext. Problematisch wird es nur, wenn du den Text als Trick benutzt, um Inhalte zu verstecken oder Nutzer zu täuschen. Dann hast du kein HTML-Problem, sondern ein Vertrauensproblem.

Mein Ansatz ist einfach:

• Nutze das Element ehrlich.
• Zeige echte Änderungen.
• Vermeide Keyword-Spam.

So bleibt die Seite sauber, lesbar und technisch korrekt.

Barrierefreiheit: Warum das Strikethrough-Element besser ist als nur CSS

Screenreader können semantische Elemente besser interpretieren als rein visuelles Styling. Das heißt: Nutzer mit assistiven Technologien verstehen eher, dass etwas gestrichen oder entfernt wurde.

Wenn du nur mit CSS arbeitest, sieht es zwar durchgestrichen aus, aber die Bedeutung kann verloren gehen. Für mich ist das ein klarer Grund, HTML-Elemente dort zu nutzen, wo sie Sinn machen.

Wenn du tiefer in HTML-Semantik einsteigen willst, lohnt sich ein Blick in die offiziellen Spezifikationen bei MDN zum <del>-Element und MDN zum <s>-Element. Für CSS-Alternativen ist auch MDN zu text-decoration-line nützlich.

Die häufigsten Fehler beim durchgestrichenen Text in HTML

Ich sehe immer wieder dieselben Fehler. Hier ist die kurze Liste:

• Falsches Element – <s> und <del> werden verwechselt.
• Nur optisch gedacht – Semantik wird ignoriert.
• Zu viel Einsatz – alles wird durchgestrichen, obwohl nur ein Teil geändert wurde.
• Unklare Aussage – der Nutzer versteht nicht, warum der Text gestrichen ist.

Wenn du sauber arbeitest, braucht es keine Erklärungsschlacht. Der Kontext muss direkt klar sein.

Meine kurze Checkliste für das Strikethrough-Element

Bevor ich durchgestrichenen Text in HTML einbaue, prüfe ich das hier:

• Ist der Text wirklich entfernt oder nur visuell markiert?
• Passt <del> oder eher <s>?
• Versteht der Nutzer sofort den Grund für die Markierung?
• Würde CSS allein die Bedeutung verlieren lassen?
• Ist der Einsatz barrierefrei und semantisch sauber?

Wenn ich alle fünf Fragen mit Ja oder klar beantwortet habe, gehe ich live.

Fazit: durchgestrichener Text in HTML richtig nutzen

Ich nutze durchgestrichenen Text in HTML, wenn ich Klarheit will. Das Strikethrough-Element ist kein Deko-Tool, sondern ein Signal: Dieser Inhalt wurde geändert, entfernt oder ist nicht mehr gültig. Genau dafür ist es stark.

Wenn du sauber zwischen <del>, <s> und reinem CSS unterscheidest, baust du bessere Inhalte. Besser für Nutzer. Besser für Barrierefreiheit. Besser für sauberes HTML. Und genau so sollte es sein.

durchgestrichener Text in HTML ist am besten, wenn er klar, semantisch und ehrlich eingesetzt wird.