<s> - The Strikethrough Element

The `<s>` Element

Inline HTML5

The strikethrough element represents text that is no longer accurate or no longer relevant, typically rendered with a line through it.

Quick Example

<p><s>Out of stock</s> Back in stock now!</p>
<p><s>Limited time offer</s> Offer extended!</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><s>Out of stock</s> Back in stock now!</p>
<p><s>Limited time offer</s> Offer extended!</p>

Syntax

<s>text that is no longer accurate</s>

The <s> element indicates text that is no longer valid but is kept for reference.

`<s>` vs `<del>`

Critical distinction for proper semantic markup:

<s>
<del>

<!-- No longer accurate or relevant -->
<p><s>Ships in 5-7 days</s> Ships in 2-3 days</p>
<p><s>Out of stock</s> In stock</p>

Use when information is outdated but not deleted.

<!-- Removed during editing -->
<p>Price: <del>$99</del> $79 (edited)</p>
<p>Meeting: <del>Tuesday</del> Wednesday (correction)</p>

Use for editorial deletions and document changes.

Common Use Cases

Status Changes

<p>Status: <s>Processing</s> Shipped</p>
<p>Availability: <s>Sold out</s> Available</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Status: <s>Processing</s> Shipped</p>
<p>Availability: <s>Sold out</s> Available</p>

Outdated Information

<p><s>Meeting room has been changed to Conference Room A</s></p>
<p>Update: Meeting will now be held in Conference Room B</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><s>Meeting room has been changed to Conference Room A</s></p>
<p>Update: Meeting will now be held in Conference Room B</p>

Discontinued Items

<ul>
<li>Widget Pro - $29.99</li>
<li><s>Widget Classic - $19.99</s> (Discontinued)</li>
<li>Widget Ultra - $39.99</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li>Widget Pro - $29.99</li>
<li><s>Widget Classic - $19.99</s> (Discontinued)</li>
<li>Widget Ultra - $39.99</li>
</ul>

Expired Offers

<p><s>50% off this weekend only!</s></p>
<p>New offer: 30% off all week!</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p><s>50% off this weekend only!</s></p>
<p>New offer: 30% off all week!</p>

Completed Tasks

<ul>
<li><s>Write documentation</s></li>
<li><s>Review code</s></li>
<li>Deploy to production</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li><s>Write documentation</s></li>
<li><s>Review code</s></li>
<li>Deploy to production</li>
</ul>

Real-World Examples

E-commerce Product Page

<div class="product">
<h3>Premium Headphones</h3>
<p class="availability">
  <s>Out of stock</s>
  <strong style="color: green;">Back in stock!</strong>
</p>
<p class="shipping">
  <s>Ships in 2 weeks</s>
  Ships within 24 hours
</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="product">
<h3>Premium Headphones</h3>
<p class="availability">
  <s>Out of stock</s>
  <strong style="color: green;">Back in stock!</strong>
</p>
<p class="shipping">
  <s>Ships in 2 weeks</s>
  Ships within 24 hours
</p>
</div>

Event Information

<article class="event">
<h4>Tech Conference 2024</h4>
<p>Date: December 15-17, 2024</p>
<p><s>Early bird tickets: $199</s> (Expired)</p>
<p>Regular tickets: $299</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article class="event">
<h4>Tech Conference 2024</h4>
<p>Date: December 15-17, 2024</p>
<p><s>Early bird tickets: $199</s> (Expired)</p>
<p>Regular tickets: $299</p>
</article>

Todo List

<h4>Project Tasks</h4>
<ol>
<li><s>Design mockups</s> ✓</li>
<li><s>Build prototype</s> ✓</li>
<li>User testing</li>
<li>Final deployment</li>
</ol>

Result

Interactive code playground requires JavaScript. Here's the code:

<h4>Project Tasks</h4>
<ol>
<li><s>Design mockups</s> ✓</li>
<li><s>Build prototype</s> ✓</li>
<li>User testing</li>
<li>Final deployment</li>
</ol>

Pricing Table

<table>
<tr>
  <th>Plan</th>
  <th>Price</th>
</tr>
<tr>
  <td>Basic</td>
  <td><s>$9.99/mo</s> $7.99/mo</td>
</tr>
<tr>
  <td>Pro</td>
  <td><s>$19.99/mo</s> $15.99/mo</td>
</tr>
</table>

Result

Interactive code playground requires JavaScript. Here's the code:

<table>
<tr>
  <th>Plan</th>
  <th>Price</th>
</tr>
<tr>
  <td>Basic</td>
  <td><s>$9.99/mo</s> $7.99/mo</td>
</tr>
<tr>
  <td>Pro</td>
  <td><s>$19.99/mo</s> $15.99/mo</td>
</tr>
</table>

Styling

Customize strikethrough appearance:

<style>
s {
  text-decoration: line-through;
  color: #999;
  opacity: 0.6;
}
s.highlight {
  background: #ffe6e6;
  color: #c00;
  padding: 2px 4px;
}
</style>

<p><s>Original text</s> Updated text</p>
<p><s class="highlight">Discontinued feature</s></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
s {
  text-decoration: line-through;
  color: #999;
  opacity: 0.6;
}
s.highlight {
  background: #ffe6e6;
  color: #c00;
  padding: 2px 4px;
}
</style>

<p><s>Original text</s> Updated text</p>
<p><s class="highlight">Discontinued feature</s></p>

Double Strikethrough

<style>
.double-strike {
  text-decoration: line-through;
  text-decoration-style: double;
}
</style>

<p><s class="double-strike">No longer valid</s></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.double-strike {
  text-decoration: line-through;
  text-decoration-style: double;
}
</style>

<p><s class="double-strike">No longer valid</s></p>

When NOT to Use `<s>`

<p>This is <s>not</s> a good idea.</p>

<p>This is <em>not</em> a good idea.</p>

Don’t Use for Document Edits

Wrong
Right

<p>Price: <s>$99</s> $79 (correction)</p>

<p>Price: <del>$99</del> <ins>$79</ins></p>

Semantic Alternatives

<!-- No longer accurate -->
<p><s>Ships tomorrow</s> Ships next week</p>

<!-- Removed during editing -->
<p><del datetime="2024-12-11">Old version</del></p>

<!-- Deprecated! Use <s> or <del> instead -->
<p><strike>Don't use this</strike></p>

With Replacement Text

Show both old and new information:

<p>
Office hours:
<s>9 AM - 5 PM</s>
<strong>8 AM - 6 PM</strong>
</p>

<p>
Contact:
<s>support@oldsite.com</s>
support@newsite.com
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Office hours:
<s>9 AM - 5 PM</s>
<strong>8 AM - 6 PM</strong>
</p>

<p>
Contact:
<s>support@oldsite.com</s>
support@newsite.com
</p>

Accessibility

Some screen readers announce strikethrough text, but support varies. Always provide context.

Provide Clear Context

Unclear
Clear

<p><s>Available</s></p>

<p><s>Out of stock</s> Available now!</p>

Use ARIA When Needed

For complex updates:

<p>
  <s aria-label="Previous status: sold out">Sold out</s>
  <span aria-label="Current status: in stock">In stock</span>
</p>

Visual Indicators

Combine strikethrough with other indicators:

<style>
.status-changed s::after {
  content: ' ❌';
  font-size: 0.8em;
}
.status-changed strong::before {
  content: '✓ ';
  color: green;
}
</style>

<div class="status-changed">
<p><s>Processing order</s> <strong>Order shipped</strong></p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.status-changed s::after {
  content: ' ❌';
  font-size: 0.8em;
}
.status-changed strong::before {
  content: '✓ ';
  color: green;
}
</style>

<div class="status-changed">
<p><s>Processing order</s> <strong>Order shipped</strong></p>
</div>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	5.5+	Full support

The <s> element has excellent browser support across all versions.

For text deleted during editing. Learn more →

For text inserted during editing. Learn more →

<s> - The Strikethrough Element

The <s> Element

Quick Example

Syntax

<s> vs <del>

Common Use Cases

Status Changes

Outdated Information

Discontinued Items

Expired Offers

Completed Tasks

Real-World Examples

E-commerce Product Page

Event Information

Todo List

Pricing Table

Styling

Double Strikethrough

When NOT to Use <s>

Don’t Use for Emphasis

Don’t Use for Document Edits

Semantic Alternatives

With Replacement Text

Accessibility

Screen Reader Behavior

Provide Clear Context

Use ARIA When Needed

Visual Indicators

Browser Support

Related Elements

Specifications

The `<s>` Element

`<s>` vs `<del>`

When NOT to Use `<s>`