🔤 Chapter 38: Text-Level Semantic Elements

The s Element – No Longer Accurate

Semantic marking of outdated or inaccurate information, distinguishing `<s>` from editorial `<del>`/`<ins>`, and solving the screen-reader strikethrough accessibility gap.

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 $399~~ Now $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!)

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 16–26: .sr-only CSS 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.99 appears with a sleek horizontal strikethrough in muted grey.
The current price $199.99 stands out in bold green text.
Screen readers cleanly announce both prices with their corresponding verbal roles.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible Strikethrough with the s Element</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      line-height: 1.6;
      max-width: 640px;
      margin: 2rem auto;
      padding: 0 1rem;
      color: #0f172a;
    }
    /* Standard Screen-Reader-Only Utility Class */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .deal-card {
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 1.5rem;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .old-price {
      color: #64748b;
      margin-right: 0.5rem;
    }
    .sale-price {
      color: #16a34a;
      font-size: 1.5rem;
      font-weight: 700;
    }
    .badge {
      background: #fee2e2;
      color: #dc2626;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      text-transform: uppercase;
    }
  </style>
</head>
<body>

<article class="deal-card">
    <span class="badge">Flash Sale</span>
    <h2>Noise-Cancelling Wireless Headphones</h2>
    <p>Premium spatial audio with 40-hour battery life.</p>

<p class="pricing-container">
      <span class="sr-only">Original price: </span>
      <s class="old-price">$349.99</s>
      <span class="sr-only">, discounted current price: </span>
      <strong class="sale-price">$199.99</strong>
    </p>

<p>
      <s>Includes free wired 3.5mm adapter</s> 
      <small>(Offer expired yesterday; USB-C cable included instead)</small>
    </p>
  </article>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🏋️ 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

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hotel Suite Booking - Verified Solution</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 600px; margin: 2rem auto; color: #0f172a; }
    .suite-card { border: 1px solid #cbd5e1; padding: 1.5rem; border-radius: 8px; }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    s { color: #64748b; margin-right: 0.5rem; }
    .rate { font-size: 1.25rem; color: #047857; }
  </style>
</head>
<body>

  <article class="suite-card">
    <h3>Penthouse Horizon Suite</h3>

    <p class="pricing">
      <span class="sr-only">Original rate: </span>
      <s>$850</s>
      <span class="sr-only">, discounted rate: </span>
      <strong class="rate">$595 / night</strong>
    </p>

    <ul>
      <li>King size bed &amp; panoramic ocean balcony</li>
      <li>
        <span class="sr-only">Expired promotion: </span>
        <s>Free airport helicopter transfer</s> 
        <small>(Offer ended Aug 15)</small>
      </li>
      <li>Complimentary breakfast buffet included</li>
    </ul>
  </article>

</body>
</html>

Why this works:

Deprecated <strike> elements are replaced with WHATWG-compliant <s> tags.
Screen readers receive explicit verbal prompts ("Original rate:", "discounted rate:") via .sr-only.
The expired promotion is marked with <s>, while the date explanation is housed inside <small>.

⚠️ 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 supports datetime and cite attributes).
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-only labels) 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.org price and priceCurrency on the <data> or <meta> tag to ensure Google Search displays the correct sale price in SERP snippets.
CSS speak-as Exploration: The CSS Speech Module defines speak-as: spell-out and 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-only accessibility text.
<s> is an inline phrasing element that defaults to text-decoration: line-through.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? 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

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

WHATWG HTML Living Standard Specification

Element Comparison Matrix

The Critical Accessibility Gap: Screen Readers & Strikethrough

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Hotel Booking Room Availability & Discount

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

When displaying a discount from $100 down to $75 on an e-commerce website, which HTML element should enclose the crossed-out $100?

Why is wrapping crossed-out prices strictly in <s>$99</s> without additional helper markup problematic for accessibility?

In a legal contract comparison tool that highlights deleted clauses and inserted clauses between Version 1 and Version 2, which elements should be used?

Why is wrapping crossed-out prices strictly in `<s>$99</s>` without additional helper markup problematic for accessibility?