Strikethrough: <s>, <del>, and <strike>
Representing no longer accurate content with <s>, editorial document deletions with <del>, retiring obsolete <strike>, and building accessible e-commerce discount pricing.
🎯 Learning Objectives
- Distinguish between
<s>(content no longer accurate/relevant) and<del>(editorial document deletions). - Understand why the legacy
<strike>element is obsolete in modern HTML5. - Build accessible e-commerce product price cards using
<s>and screen-reader helper labels. - Utilize the
citeanddatetimeattributes with<del>for document version histories. - Implement the
.sr-onlyaccessible utility pattern to ensure visually struck text is understandable to all users.
📖 Mental Model: The Clearance Price Sticker vs The Document Redaction
Imagine two different scenarios where a line is drawn through printed text:
<s>(No Longer Relevant): A retailer slashes the original price ($99.99) on a clearance shoe box. The old price isn't an editorial mistake; it is simply no longer the active, relevant price.<del>(Editorial Deletion): A committee revises a company policy manual, crossing out an old clause to record that it has been repealed and replaced in Version 2.0.<strike>(Obsolete): An old typewriter mechanism from 1995 that modern HTML5 standards have permanently retired.
1. The Triad of Strikethrough Tags: Past & Present
HTML has evolved significantly in how it handles strikethrough lines:
| Element | Status | HTML5 Semantic Meaning | Attributes |
|---|---|---|---|
<s> |
Standard (Active) | Represents contents that are no longer accurate or no longer relevant (e.g. superseded sale prices, outdated statements). | Global attributes |
<del> |
Standard (Active) | Represents an explicit editorial removal from a document as part of a change-tracking record. | cite, datetime |
<strike> |
Obsolete / Deprecated | Purely presentational in HTML 3.2/4.01. Do not use in modern HTML5. | None |
2. Accessible E-Commerce Pricing Architecture
A frequent accessibility blunder in e-commerce stores is writing:
<!-- ❌ BAD FOR ACCESSIBILITY -->
<p><s>$100.00</s> $79.00</p>
Because screen readers do not announce strikethrough lines by default, a blind user will hear the synthesizer say: "One hundred dollars seventy-nine dollars", with no indication of which number is the active price!
The professional, accessible pattern uses visually hidden helper text (.sr-only):
<!-- ✅ ACCESSIBLE & SEMANTIC -->
<p class="price-display">
<span class="sr-only">Original price:</span>
<s>$100.00</s>
<span class="sr-only">Discounted sale price:</span>
<strong class="sale-price">$79.00</strong>
</p>
3. Interactive E-Commerce Price Card Lab
Test this production-ready discount product card. Notice how <s> is styled with subdued colors, and the current price is highlighted with semantic <strong>.
🏋️ Hands-On Exercise: Formatting SaaS Pricing & Changelog
- In the SaaS pricing tier, strike through the old price
"$59/mo"using the semantic<s>element. - Wrap the new promotional price
"$39/mo"in a<strong>tag. - In the Release Notes changelog, mark the removed legacy feature
"FTP Upload Support"using<del datetime="2026-08-21">. - Click ▶ Run Code to test your changes.
⚠️ Pitfall: Using <strike> in New Code
<strike> was deprecated in HTML4 and officially made obsolete in HTML5. Modern linters and validators will flag <strike> as non-compliant. Always use <s> for outdated content or <del> for document revisions.
💡 Pro Tip: Customizing the Strikethrough Line in CSS
You can customize the color and thickness of a strikethrough line independently of the text color using modern CSS text-decoration-color:
s {
color: #718096;
text-decoration-color: #e53e3e; /* Bright red strike line across gray text */
text-decoration-thickness: 2px;
}
📌 Key Takeaways
<s>represents content that is no longer accurate or relevant (e.g., discounted old prices).<del>represents an editorial deletion from a document withciteanddatetimetracking.<strike>is obsolete and should never be used in modern HTML5.- Always include hidden accessible helper text (e.g.
.sr-only) for screen reader users when displaying sale prices.