How to semantically strikethrough with HTML5

Do you want a visual indication that something was removed from the document or a visual representation that you cross something from a (to-do, wish-list) list. Do you want to create a discount price component? We can easily use some CSS for this result, but HTML5 provides us with more semantic alternatives. Give meaning to your code by using <del> and <s> tags! 👌

IG short post

 

Hello <s>world!</s>

Hello world!
 

Hello <del>world!</del>

Hello world!
 

 

The <del> tag

 

What does it do?

The <del> tag renders text with a strikethrough and represents some text that has been deleted from a document.

When to use it?

Use <del> when you want to indicated that something was removed from the document/page

How to use it?

The most common use case is displaying source code difference information (e.g., what your PR changes in GitHub). It can be used along with the <ins> element, to indicate the added text to the document.

Example

<p>Is There Life Before Coffee? <del>Yes</del> <ins>No!</ins></p>

 

The <s> tag

 

When to use it?

The HTML <s> tag renders text with a strikethrough and represent things (or text) that are no longer relevant or accurate.

Example

<p><s>Today's Special: Chocolate pancakes</s> SOLD OUT</p>

<del> vs <s>

You may find confusing when to use which, as both tags has the same visual representation (yes, they are both strikethroughs).

Let's see good and bad cases for these:

<s>

✅ A good case for <s>: Discounts

<span><s>100€</s> 99.99€</span>

⛔️ A bad case for <s>: Document edits

<del>

✅ A good case for <del>: Wishlist/To-do list

<ul>
    <li><s>2021 plans</s></li>
    <li>Social Distance</li>
    <li>Get vaccinated</li>
    <li>Travel 2022</li>
</ul>

⛔️ A bad case for <del>: Information that is no longer accurate

strike

You might have seen the tag, especially if you worked in old codebases. This is a tag that was deprecated in HTML4. It was replaced with a more semantically appropriate and tags in HTML5. As documentation suggests, it's not suggest it to use it anymore!

This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.

Are they semantic enough?

The del and s tags are not announced by most screen readers. It can be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.

It is important to not abuse this technique and only apply it in situations where not knowing content has been deleted would adversely affect understanding

del::before,
del::after {
  /* CSS rules */
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

References

<del>: The Deleted Text element

<s>: The striked Text element

What is the difference between <s> and <del> in HTML, and do they affect website rankings?

<s> vs <del> in HTML

HTML del tag