Skip to main content

The difference between strikethrough and del

Posted in Development and HTML

Just like <em> and <i>, and <strong> and <b>, the distinction between <s> and <del> is subtle, but it’s worth knowing.

Things that have been deleted

The deleted text (<del>) element is a good place to start as its use is much more specific than strikethrough:

text that has been deleted from a document

So <del> should be used for things like:

  • code ‘diffs’, to see what code has been removed from a document
  • word processors that track changes
  • ‘done’ to-do list items

Things that no longer apply but are still meaningful

The explanation of strikethrough (<s>) in MDN Web Docs, my usual go-to reference point, falls a little short of its usual high standard:

things that are no longer relevant or no longer accurate

If the text is no longer relevant, why are we keeping it? My take on this that struck through text:

  • has to be relevant to the document
  • no longer applies

Some examples are probably helpful:

  • Sold out tickets, where the original listing lets late-comers know what they’ve missed out on
  • Discounts! That initial price is important so buyers know how much they’re saving
  • Corrections, where you want to communicate what you originally wrote as well as what you replaced it with

A correction might look like this:

<p>When he returned from the barbers with a terrible haircut, my first instinct was to <s>laugh out loud</s> console him</p>

Strikethrough is more multi-purpose than <del>, which has a very specific use, so for formatting text in paragraphs <s> is almost certainly element to reach for.


I send a newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. If you need a link, don’t use a button

    Links sometimes need to look like buttons, but what about the other way round? Spoiler alert: it’s a terrible idea!

  2. Overlapping interactive areas

    When an interactive element like a button, link, and form field sits on top of another interactive element, accessibility (and usability) problems arise.