<s> Strikethrough
Content that is no longer accurate or relevant, drawn crossed out.
<s> marks text that is no longer correct or relevant, like an old price next to a new one. Browsers strike a line through it.
Edits to a document, where you want to record that text was removed, call for <del>. Screen readers mostly stay silent about strikethrough, so the surrounding text has to make the meaning clear as well.
The s element definition (opens in a new tab) limits it to content that is no longer accurate or relevant. Document edits go in the del element.
Syntax
<s>no longer accurate</s>When to use it
<s> is for information that is still shown but has stopped being true or relevant: a sold-out ticket tier, a cancelled date in an events list, an old opening time on a notice board page, or a crossed-out offer that has ended. Keeping the old text visible lets readers compare it with what replaced it.
If the text was removed as part of editing the document, for example a correction in a published article, use del. If you just want a decorative line through text, use CSS text-decoration:line-through on a span.
Striking out a sold-out option changes only its look. People can still click the link or button inside it. Remove the link or disable the button, and add a word such as "Sold out" next to the struck text so the status is clear to everyone, including people who cannot see the line.
Live example
Edit the code and watch the preview.
<p>Price: <s>$20</s> now only $12!</p>More examples
Sold-out ticket tiers
A ticket list keeps the sold-out tier visible but crossed out, and adds the words "sold out" in plain text. The sold-out tier has no link, so nobody can try to buy it.
<ul>
<li><s>Early bird - $15</s> (sold out)</li>
<li><a href="/tickets/standard">Standard - $20</a></li>
<li><a href="/tickets/vip">VIP - $45</a></li>
</ul>Cancelled event date
An events list shows a cancelled workshop without deleting it, so people who saw the old list understand what changed. The new date follows in normal text. The cancelled date stays readable but clearly out of date.
<h2>Pancake workshops</h2>
<p><s>Saturday 7 November, 10 am</s> - cancelled</p>
<p>Saturday 14 November, 10 am - places available</p>Tip: s is for outdated info. Document edits get del.
Browser support
s is supported by all browsers and drawn with a line through the text. It was deprecated in HTML 4 together with strike, then redefined in HTML5 for content that is no longer accurate or relevant. strike stays obsolete, so use s or CSS instead.
Accessibility
Most screen readers skip strikethrough. Add hidden or visible text such as Was $50, now $35 so the change comes across (WCAG 1.3.1). Text whose meaning depends on formatting is covered in the W3C note Understanding Info and Relationships (opens in a new tab).
Common mistakes
Wrong
<strike>$50</strike> $35Right
<s>$50</s> $35strike is obsolete. For content that is no longer accurate, use s.
Frequently asked questions
What is the difference between s and del in HTML?
<s> is for content that is no longer accurate or relevant but stays visible, such as the original price beside a sale price. <del> records content removed from the document as an edit, and it can carry cite and datetime attributes. By default both get a line through them.
How do I make strikethrough text in HTML?
That depends on whether the line means something. Outdated information gets <s>, and removed text gets <del>. A purely visual effect is CSS text-decoration:line-through on a span or another element. The old <strike> tag is obsolete, so leave it out. Its traditional uses are described in Wikipedia's article on strikethrough (opens in a new tab).