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. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.