LEARNING OBJECTIVES ⌵
- Define the exact semantic role of the
<s>element as representing content that is no longer accurate or relevant. - Contrast
<s>(stale/inaccurate information) with<del>(editorial revision deletion) and<strike>(obsolete legacy tag). - Implement accessible strike-through patterns that communicate crossed-out pricing to screen reader users via hidden helper text.
- Evaluate real-world e-commerce and changelog patterns for spec-compliant strike-through markup.
🎬 INTERACTIVE VISUAL PIPELINE
Core Architecture Simulation
1. Input
Directives & Tags
2. Parse
Tokenizer & AST
3. Layout
Box Model & Flow
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.
📖 The Mental Model & Story (Intuitive Foundation)
Imagine browsing a weekend sale at an electronics retailer:
UltraHD Monitor:
Was $399Now $249!
Why is the "$399" crossed out with a horizontal line? Is it an editorial correction of a typo made by a copywriter? No. Is it an invalid historical document edit? No. The price was $399 yesterday, but today that statement is no longer accurate or relevant. The retailer intentionally leaves it on the page so you can see the discount.
+----------------------------------------------------------------------------------------------------+
| THE STRIKE-THROUGH TAXONOMY IN HTML |
+----------------------------------------------------------------------------------------------------+
| |
| 1. THE OBSOLETE TAG (Do Not Use): |
| <strike>$399</strike> ------> Deprecated in HTML4, removed in HTML5. Pure presentation. |
| |
| 2. THE EDITORIAL REVISION (<del>): |
| "Meeting is on <del datetime="2026-08-20">Tuesday</del> <ins>Wednesday</ins>." |
| ------> Represents an edit/revision to a document draft with change tracking metadata. |
| |
| 3. THE INACCURATE / OUTDATED FACT (<s>): |
| "<s>Original Price: $399</s> <strong>Sale: $249</strong>" |
| ------> Represents content that is no longer accurate or relevant, but not a document edit. |
| |
+----------------------------------------------------------------------------------------------------+
The <s> element gives structural meaning to crossed-out, stale, or superseded data without falsely claiming that the text was an editorial draft modification.
Technical Deep Dive & Specifications
WHATWG HTML Living Standard Specification
According to the official WHATWG specification:
"The
<s>element represents contents that are no longer accurate or no longer relevant. The<s>element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the<del>element."
Element Comparison Matrix
| Element | Specification Status | Semantic Role | Attributes | Ideal Use Case |
|---|---|---|---|---|
<s> |
Standard (HTML5) | Stale, outdated, or no longer accurate data | Global attributes | Crossed-out old prices, expired promo codes, sold-out options |
<del> |
Standard (HTML5) | Tracked editorial deletion from a document | cite, datetime |
Legal contract amendments, collaborative wiki diffs |
<ins> |
Standard (HTML5) | Tracked editorial addition to a document | cite, datetime |
Newly added contract clauses, wiki additions |
<strike> |
OBSOLETE | Purely visual strikethrough line | None | Never use in modern web development |
The Critical Accessibility Gap: Screen Readers & Strikethrough
A major blind spot in frontend development is assuming that visual strikethrough is automatically announced to blind users.
By default, major screen readers (Apple VoiceOver, NVDA, JAWS) do not announce <s> or <del> tags in normal reading mode because pausing to announce every strikethrough would slow down browsing.
Visual User Sees: [ ~~$399~~ $249 ] (Understands $399 is crossed out)
Default Screen Reader Hears: "Three hundred ninety-nine dollars, two hundred forty-nine dollars"
(Confusing! Which price is real?)
To ensure WCAG 2.1 compliance, senior engineers use visually hidden text (.sr-only) alongside <s>:
<p class="product-price">
<span class="sr-only">Original price: </span>
<s>$399.00</s>
<span class="sr-only">, discounted sale price: </span>
<strong class="current-price">$249.00</strong>
</p>
Accessibility Tree Reading: "Original price: $399.00, discounted sale price: $249.00"
(Crystal clear for every user!)
💻 Interactive Code Playground
Starter Code
Line-by-Line Code Breakdown
- Line 16–26:
.sr-onlyCSS rule — Standard accessible pattern hiding content visually while keeping it fully announced in the Accessibility Tree. - Line 57:
<span class="sr-only">Original price: </span>— Provides unambiguous context for assistive tools. - Line 58:
<s class="old-price">$349.99</s>— Semantic<s>element marks the original price as no longer accurate. - Line 60:
<strong class="sale-price">$199.99</strong>— Conveys the current active price with semantic importance. - Line 64:
<s>Includes free wired 3.5mm adapter</s>— Marks a previously bundled accessory as no longer valid.
Expected Browser Render Output
- The flash sale card displays a red "Flash Sale" badge.
- The original price
$349.99appears with a sleek horizontal strikethrough in muted grey. - The current price
$199.99stands out in bold green text. - Screen readers cleanly announce both prices with their corresponding verbal roles.
🏋️ Hands-On Exercise
🎯 The Challenge: Hotel Booking Room Availability & Discount
You are building the booking summary for a luxury hotel suite. The current code uses deprecated <strike> tags and lacks any assistive cues, causing screen readers to output two numbers back-to-back without context.
Instructions:
- Eliminate all deprecated
<strike>tags and replace them with semantic<s>elements. - Inject accessible screen-reader helper spans (
.sr-only) before the old price and the discounted price. - Mark the expired early-bird perk using
<s>. - Ensure the actual active rate is highlighted with
<strong>.
🏁 Starter Code Sandbox
⚠️ Common Pitfalls
- Using
<s>for Document Revisions: Never use<s>when marking editorial deletions in legal contracts, collaborative wikis, or git-style changelogs. That is the exclusive domain of<del>(which supportsdatetimeandciteattributes). - Using Deprecated
<strike>or<u>: The<strike>tag was obsoleted over a decade ago. Never use it in modern projects. - Relying Solely on Strikethrough for Accessibility: Always provide programmatic or text-based context (such as
.sr-onlylabels) so non-sighted users know which price is current.
💡 Pro Tips
- E-Commerce Rich Snippets & Schema.org: Search engines (Googlebot) parse pricing containers carefully. While
<s>marks the stale price for human eyes, combine it with Schema.orgpriceandpriceCurrencyon the<data>or<meta>tag to ensure Google Search displays the correct sale price in SERP snippets. - CSS
speak-asExploration: The CSS Speech Module definesspeak-as: spell-outand strike properties. While browser support is still evolving, combining semantic<s>with explicit helper text remains the battle-tested gold standard across all modern screen readers.
📌 Key Takeaways
<s>represents outdated, stale, or no longer accurate information (such as original prices).<del>represents tracked editorial deletions from a document revision history.<strike>is obsolete and must never be used in modern HTML5.- Screen readers do not announce strikethrough by default; always provide
.sr-onlyaccessibility text. <s>is an inline phrasing element that defaults totext-decoration: line-through.- --
Question 1 / 3
When displaying a discount from $100 down to $75 on an e-commerce website, which HTML element should enclose the crossed-out $100?
Topic: HTML Fundamentals
Question 2 / 3
Why is wrapping crossed-out prices strictly in <s>$99</s> without additional helper markup problematic for accessibility?
Topic: HTML Fundamentals
Question 3 / 3
In a legal contract comparison tool that highlights deleted clauses and inserted clauses between Version 1 and Version 2, which elements should be used?
Topic: HTML Fundamentals