HTML Free Codes<s>
Defines text that is no longer accurate or relevant
Definition and Usage
The <s> element specifies text that is no longer correct, accurate, or relevant. The browser will display the content with a strikethrough line.
The <s> tag should not be confused with the <del> tag. While both create strikethrough text, they have different semantic meanings:
- <s>: Indicates content that is no longer accurate or relevant (stylistic strikethrough)
- <del>: Indicates content that has been deleted from a document (semantic deletion)
<s> for text that is no longer accurate, such as outdated prices, expired offers, or discontinued products.
<s> tag is not deprecated. If you need to indicate document edits or deletions, use <del> instead.
Browser Support
The <s> tag is supported in all major browsers:
Attributes
The <s> tag supports the Global Attributes in HTML.
The <s> tag also supports the Event Attributes in HTML.
Examples
Basic Strikethrough
Mark text as no longer accurate:
Example
<p><s>This information is outdated.</s> Updated content coming soon!</p>Price Comparison
Show old and new prices:
Example
<div class="product">
<h3>Premium Subscription</h3>
<p class="price">
<s>$99.99/month</s>
<strong>$79.99/month</strong>
</p>
<p>Limited time offer!</p>
</div>Outdated Information
Indicate information that is no longer valid:
Example
<p>
<s>Office hours: Monday-Friday, 9 AM - 5 PM</s>
</p>
<p>
<strong>New office hours: Monday-Friday, 8 AM - 6 PM</strong>
</p>With CSS Styling
Customize the appearance of strikethrough text:
Example
<style>
s {
text-decoration: line-through;
color: #999;
opacity: 0.7;
}
s.red-line {
text-decoration-color: #e74c3c;
text-decoration-thickness: 2px;
}
s.highlight {
background-color: #fff3cd;
padding: 2px 4px;
}
</style>
<p>Default: <s>Old price $50</s></p>
<p>Red line: <s class="red-line">Out of stock</s></p>
<p>Highlighted: <s class="highlight">Limited offer</s></p><del> vs <s> Comparison
Understand when to use each tag:
Example
<!-- Use <s> for no longer accurate information -->
<p>Product price: <s>$100</s> $80</p>
<!-- Use <del> for document edits/deletions -->
<p>The meeting is on <del>Tuesday</del> <ins>Wednesday</ins>.</p>E-commerce Use Case
Show discontinued products or expired offers:
Example
<div class="product-card">
<h3>Wireless Mouse</h3>
<p><s>Available in 5 colors</s></p>
<p><strong>Now available in black only</strong></p>
<p class="price">
<s>Regular price: $29.99</s>
<span class="sale">Sale: $19.99</span>
</p>
</div><s> vs <del> Comparison
Understanding the difference between <s> and <del> is crucial for semantic HTML:
| Feature | <s> | <del> |
|---|---|---|
| Meaning | No longer accurate or relevant | Deleted from the document |
| Semantic Use | Stylistic strikethrough | Document edit/deletion |
| Attributes | Only global attributes | cite, datetime |
| Example | Old price, discontinued product | Revised text, removed content |
| Best For | Outdated info, expired offers | Version control, editing history |
| Paired With | New or replacement content | <ins> (inserted text) |
When to Use <s> vs <del>
Use <s> when:
- Showing old prices or discounts
- Indicating outdated or expired information
- Marking discontinued products or services
- Displaying information that is no longer valid
- Showing what has changed without tracking edits
Use <del> when:
- Tracking document edits and revisions
- Showing content that was removed during editing
- Displaying version control changes
- Marking deletions in collaborative documents
- Need to include cite or datetime attributes
Accessibility Considerations
- Screen readers may or may not announce strikethrough text differently
- Ensure context is clear - don't rely solely on visual strikethrough
- Consider adding explanatory text for users who cannot see the strikethrough
- Use ARIA attributes if additional context is needed for assistive technologies
- Make sure color contrast is sufficient for users with visual impairments
- Test with screen readers to ensure the meaning is conveyed
Try it Yourself
Interactive Example
See how the <s> tag appears in different contexts:
Old price: $99.99 $79.99
Product status: Available in all sizes Only size M available
Offer: 50% off - Expired New offer: 30% off
Best Practices
- Use
<s>for stylistic strikethrough of outdated information - Use
<del>for semantic deletions and document edits - Always provide context - explain why information is no longer accurate
- Don't use
<s>just for visual styling - use CSS instead - Combine with new or updated content to show what replaced the old information
- Keep strikethrough text readable - don't make it completely invisible
- Test accessibility with screen readers and keyboard navigation
- Consider using additional styling to make the distinction clear
Default CSS Settings
Most browsers will display the <s> element with the following default values:
Default CSS
s {
text-decoration: line-through;
}