Strike-through Text: DEL and S – What is the Difference?
The two HTML tags DEL and S are inline elements. This means that by default, these tags do not generate an automatic line break.
The output of the two HTML tags del (deleted) and s (strike-through) is the same by default. The two 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 the two HTML tags.
The DEL tag is used to markup a text section in the document that is to be indicated as deleted. The deleted text remains in the document to show the history of change.
In practice, the <del> tag is very rarely used, as the strikethrough makes the web page unclear and the user is given almost no additional information.
A part of text that is indicated as deleted starts with <del> and must be closed with </del>.
Typically, the DEL tag is used in conjunction with the INS tag, such as for expired offers and promotions, or canceled event dates.
ExampleThe <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>Thursday, November 21, 2024</del> <ins><b><mark>Thursday, December 5, 2024</mark></b></ins>.With a protected space is inserted between the two dates in order to separate them more clearly from each other.
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 starts with <s> and has to be closed with </s>. Text marked up 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.
The <s> tag is used to strike through text that is no longer valid.
The event is scheduled for <s>Thursday, November 21, 2024</s> <b><mark>Thursday, December 5, 2024</mark></b>.With a protected space is inserted again between the two dates in order to separate them more clearly from each other.
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.
Unlike the DEL tag, the S tag provides an additional information for the user.