s

Description

The <s> element renders text with a strikethrough to indicate content that is no longer accurate or relevant, but should not be removed from the document. Unlike <del>, it does not indicate an edit to the document.

Semantic Meaning

The strikethrough element indicates content that's outdated but still visible:

• Content is no longer accurate or relevant
• Does NOT indicate an edit to the document (use <del> for that)
• Screen readers typically don't announce strikethrough styling
• Useful for showing price changes, completed tasks, or outdated info

When to Use

• Price reductions: Show original price crossed out next to sale price
• Completed tasks: Cross off items in a to-do list
• Outdated information: Mark content that's no longer current
• Corrections: Show what was wrong alongside what's correct
• Expired offers: Indicate deals that are no longer available

When NOT to Use

• Document edits: Use <del> for tracking document changes
• Purely decorative: Use CSS text-decoration: line-through for styling only

Variants

Default

Simple strikethrough with muted line color.

Live Examples

Price Reduction

Sale Pricing

To-Do List

Event Information

Feature Availability

Outdated Information

Comparison with del

Note the difference between <s> and <del>:

CSS Properties

Accessibility

• Screen readers: Most do NOT announce strikethrough text differently by default
• Visual only: The strikethrough is primarily a visual cue
• Context matters: Ensure surrounding text provides context for why content is struck through
• Don't rely solely on styling: Add text like "was" or "now" for clarity

Improving Accessibility

For critical information, provide text context:

Related Elements

• <del> - For text that has been deleted from the document (editorial change)
• <ins> - For text that has been inserted into the document

s vs del: Quick Reference