HTML

A Simple Guide to Crossed Out Text in HTML

Friday June 12, 2026

HTML give us some special elements for crossing text out.
We can use <s>, and <del>.

Note: The <strike> element could be used for crossing out text, but it is now depreciated.

At first glance, these elements seem to do the same thing. They display text with a line through it. That visual result is called strikethrough text.

Example: <p>Only <s>100</s> 75 euros!</p>

This would show the old price crossed out.

Example of an old price crossed out using the s tag.

But HTML is not only about appearance; it also describes meaning. That is where these tags differ.

Let’s see them one by one:

The <s> Tag

The <s> tag represents content that is no longer accurate or no longer relevant, but not necessarily deleted.
A common example is an old product price.

Example of the s element.

This tells the reader that $50 is no longer the current price. The old price remains visible because it still gives useful context.

Use <s> when the text is outdated, replaced, or no longer true in the current situation.

The <s> elment is never announced as “struck through” by any major screen reader

The <s> element is simple to interpret visually, but it is challenging for screen readers, as they read the text without indicating that it has been crossed out.

Recently, I stumbled upon an interesting CSS pseudo-element technique to enhance accessibility for screen readers.

The fix uses CSS-generated content with visually hidden text:

…the fix

Screen readers will now announce something like: “start of deleted text — was $50 — end of deleted text”.

A couple of notes:

  • You can adjust the wording in content to whatever makes sense. For example, “deletion start” / “deletion end” is also common
  • white-space: nowrap is important. Without it, some screen readers skip single-character content
  • This same pattern applies to other semantically invisible tags like <mark>, <ins>, <abbr> , <del>. Just swap the content text accordingly

The <del> Tag

The <del> tag means content was removed from a document. It has stronger meaning than <s> because it represents an actual deletion or edit.

Example of the del tag.



Here, Monday was removed and Tuesday is the new value.

This is useful in edited documents, legal text, changelogs, and content where revision history matters.

The <del> tag can also use attributes like datetime and cite.

Example of a del element using the datetime attribute.

That gives extra information about when the deletion happened.

How to Choose

Use this simple rule:

  • Use <s> when the text is no longer correct or relevant
  • Use <del> when the text was removed or edited
  • Avoid <strike> in modern HTML

If you only want visual styling with no meaning, CSS may be better.

Example of CSS code used for crossed out text.

Final Thought

Understanding the difference between these tags is more than just recognizing their visual styles; What matters is their significance. The <s> tag is used for outdated content, whereas the <del> tag is for deleted content. Once you get this distinction, writing with crossed-out text becomes a lot more purposeful.

Although my blog doesn’t support comments, feel free to reply via email or X.