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.

Accessibility in your inbox

I send an accessibility-centric 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. Not all screen reader users are blind

    There’s a common misconception that everyone who uses screen reader software is blind; that’s mostly the case, but not always.

  2. Accessibility by degrees

    Retro-fitting accessibility is far from ideal but usually the only way digital products are able to reach all of their potential users.