HTML Basics: Navigating the World of Deleted or Strike-Through Text – A DEL vs. S Breakdown

Deutsch

Strike-through Text: del and s – What is the Difference?

The two HTML tags del and s are Inline Elements. This means: By default, these two tags do not generate an automatic line break.

The output of del (deleted) and s (strike-through) is the same by default. These HTML tags are used to strike-through a single word or an entire section of text. Both tags draw a thin horizontal line in the middle over the text and indicate it as deleted or no longer valid. However, there is a significant difference between these HTML tags.

The del tag is used to mark a section of text as deleted. The text that has been marked as deleted remains in the document to show the history of changes.

In practice, the <del> tag is very rarely used, as strikethrough makes the web page unclear and the user is given almost no additional information.

A part of text that is marked as deleted begins with <del> and must end with </del>.

Typically, the del tag is used in conjunction with the INS tag, as for expired offers and promotions, or canceled event dates.

Example

The <del> tag indicates a text as deleted.

The <del> tag is used to indicate the old date as deleted. The new date is inserted. It is also highlighted in color and displayed in bold.

The term deleted is semantically not optimal, since the old date is not removed, but corrected.

The event is scheduled for <del>Monday, December 30, 2024</del>&nbsp; <ins><b><mark>Monday, January 13, 2025</mark></b></ins>.

With &nbsp; a protected space is inserted between the two dates in order to separate them more clearly from each other.

Output of the HTML code
The event is scheduled for Monday, December 30, 2024  Monday, January 13, 2025.

A del tag mustn't be placed directly inside an ins tag.

The HTML <s> Tag

In earlier versions of HTML, there was a strike tag that could be used to strike through text. In HTML5, the new s tag is a replacement for the strike tag, which is no longer valid. The new version of the s tag is equipped with a little bit of semantics.

Strikethrough text begins with <s> and must end with </s>. Text marked with s indicates content that is no longer valid and has been updated.

A practical use of the s tag is an old price that is crossed out to draw attention to an offer or a price reduction. The use of s also makes sense for limited offers and durations (for example: only 5 days left).

This HTML code is better. The old date (which is no longer valid) is crossed out with the <s> tag. Then the corrected date is inserted. In the example, it is also highlighted in color and printed in boldface.

Example

The <s> tag is used to strike through text that is no longer valid.

The event is scheduled for <s>Monday, December 30, 2024</s>&nbsp; <b><mark>Monday, January 13, 2025</mark></b>.

With &nbsp; a protected space is inserted again between the two dates in order to separate them more clearly from each other.

Output of the HTML code
The event is scheduled for Monday, December 30, 2024  Monday, January 13, 2025.
Notes

In practice, the del tag is seldom used except for prices or dates that are no longer valid, since the user is given almost no additional information.

In contrast to the del tag, the s tag still has a certain amount of information for the user.