HTML Grundlagen: Was ist der Unterschied zwischen <del> und <s>?

Text durchstreichen – DEL und S. Was ist der Unterschied?

Die Ausgabe der HTML Tags DEL und S wird vom Web-Browser gleich dargestellt. Beide Tags stellen den Text durchgestrichen dar. D.h. mitten über den Text wird eine feine horizontale Linie gezeichnet. Beide HTML Tags werden nur selten benutzt und markieren den Text als gelöscht bzw. nicht mehr gültig. Es gibt aber einen wichtigen Unterschied zwischen DEL und S.

HTML <del> TagDas HTML DEL Tag hat im Gegensatz zum S Tag eine semantische, das heißt inhaltliche Bedeutung. Das DEL Tag (del für Englisch »deleted«) wird für Inhalte verwendet, die gelöscht wurden. Gelöschter Text wird mit <del> eingeleitet und muss mit </del> abgeschlossen werden. Häufig wird das INS Tag für Text verwendet, den man nachträglich hinzufügen möchte. In der Praxis werden DEL und INS kaum benutzt, da die Webseite dadurch unübersichtlich wird und das »Durchstreichen« für den Besucher der Seite nur wenig zusätzliche Information liefert.

Ein DEL Tag darf nicht in einem INS Tag stehen.

HTML <s> TagIn früheren HTML Versionen gab es noch ein STRIKE Tag, mit dem Text durchgestrichen wurde. In HTML5 ersetzt das HTML S Tag das nun nicht mehr gültige STRIKE Tag. Das neu eingeführte HTML S Tag (s für Englisch »strike-through«) ist mit einer leichten Prise Semantik ausgestattet. Der durchgestrichene Text wird mit <s> eingeleitet und muss mit </s> abgeschlossen werden. Das S Element steht für Inhalt, der nicht mehr korrekt ist und aktualisiert wurde.

Eine sinnvolle Anwendung von S ist ein alter Preis, der durchgestrichen wird, um auf ein Angebot oder einen Preisnachlass aufmerksam zu machen. Auch für begrenzte Angebote und Zeitdauern (z.B. »nur noch 5 Tage« ist der Einsatz von S sinnvoll.

Die HTML Elemente DEL und S sind Inline-Elemente, sie erzeugen keinen automatischen Zeilenumbruch.

Beispiel

Das alte Datum wird mit dem <del> Tag gelöscht. Es folgt das neue Datum, das zusätzlich farblich markiert und fett gedruckt wird. Diese Formulierung ist semantisch nicht optimal, da das alte Datum nicht gelöscht, sondern korrigiert wird.

Die Veranstaltung findet am <del>21. März 2023</del>&nbsp; <b><mark>4. April 2023</mark></b> statt.Mit &nbsp; wird ein »geschütztes« Leerzeichen zwischen den beiden Datums-Angaben eingefügt, um sie deutlicher voneinander zu trennen.

Ausgabe des HTML CodesDie Veranstaltung findet am 21. März 2023  4. April 2023 statt.Besser ist dieser HTML Code. Das alte (nicht mehr gültige) Datum wird mit dem <s> Tag durchgestrichen. Danach folgt das korrigierte Datum, das zusätzlich farblich markiert und fett gedruckt wird.Die Veranstaltung findet am <s>21. März 2023</s>&nbsp; <b><mark>4. April 2023</mark></b> statt.Es wird wieder &nbsp; zwischen die beiden Datums-Angaben eingefügt, um sie deutlicher voneinander zu trennen.

Ausgabe des HTML CodesDie Veranstaltung findet am 21. März 2023  4. April 2023 statt.