Strikethrough using HTML5

Samantha Ming
The Startup
Published in
4 min readJul 8, 2019

--

Code Tidbit by SamanthaMing.com

CSS is great for styling, but not so good for providing meaning of your content. That’s what HTML semantic tags are for. When you’re trying to strikethrough content, there’s typically a reason you’re doing that. And that reason can be described using the proper HTML tag. Communicate that using <del> or <s> and give your code semantic meaning 🙌

<s>Text no longer relevant</s><del>Text removed from document</del>

<s> vs <del>

Yes, they are both strikethroughs. However, they convey different meaning about the content. So they are not interchangeable. You want to pick the one that reflects what you are trying to achieve. Let’s start with the definition.

<s>

Use this when you are trying to represent things that are no longer relevant or not longer accurate.

✅ A good example of this is for Price Discount

<p><s>$100</s></p>
<p>$999.99</p>

❌ However, this tag shouldn’t be used when indicating document edits. That’s where <del> come in.

<del>

Use this when you want to

--

--

Samantha Ming
The Startup

Frontend Developer sharing weekly JS, HTML, CSS code tidbits🔥 Discover them all on samanthaming.com 💛