👀 Live Preview
Old price struck through next to the new price:
The old price new price is $19.99.
HTML <s> Tag
Overview
What You’ll Learn
The <s> tag marks text that is no longer accurate or relevant. This guide covers syntax, styling, comparisons with del, pairing with ins, and best practices for beginners.
Outdated Text
No longer valid.
Strikethrough
Visual line-through.
vs del
Semantic difference.
With ins
Document changes.
CSS Style
Color and class.
Accessible
Meaningful markup.
Fundamentals
What Is the <s> Tag?
The <s> tag is a semantic HTML element used to represent text that is no longer accurate or relevant. It visually strikes through content to show users that the information is outdated or no longer valid.
Valid HTML5 — No Longer Relevant
Use s for outdated prices, deprecated features, or superseded facts. For document edits, use del instead.
Do not use the obsolete <strike> or <strike-through> elements. The modern replacement is <s> for irrelevant content or <del> for removed text.
Foundation
📝 Syntax
Wrap the text you want to strike through between opening <s> and closing </s> tags:
syntax.html
<s>Outdated Information</s>Syntax Rules
- Use
sinline inside paragraphs and other text content. - Apply global attributes like
classandstylefor custom appearance. - Pair with
inswhen showing replacements side by side. - Choose
delwhen marking text removed during document revision.
Cheat Sheet
⚡ Quick Reference
| Topic | Code Snippet | Notes |
|---|---|---|
| Basic strikethrough | <s>text</s> | Inline element |
| Styled | style="color: red" | Global attr |
| With replacement | <ins>...</ins> <s>...</s> | Change docs |
| Document removal | Use del | Not s |
| Obsolete tag | strike | Do not use |
| Browser support | Universal | All browsers |
Comparison
⚖️ <s> vs <del>
| Element | Meaning | Best for |
|---|---|---|
<s> | No longer relevant or accurate | Old prices, outdated facts |
<del> | Removed from the document | Edit history, track changes |
<ins> | Added to the document | New content in revisions |
Reference
🧰 Attributes
The <s> tag has no tag-specific attributes. Combine it with global attributes or CSS for a customized appearance.
attributes.html
<s style="color: red;">Deprecated Feature</s>class CSSApply a class for reusable strikethrough styling.
class="outdated"style InlineInline color or text-decoration overrides.
style="color: red"title TooltipExplain why the text is struck through.
title="Discontinued"Hands-On
Examples Gallery
Strike through outdated text and pair s with ins to document changes.
📚 Common Use Cases
The <s> tag visually strikes through text that is no longer accurate or relevant.
Strikethrough Text
The primary purpose of s is to strike through text that is outdated or no longer valid.
strikethrough-text.html
<p>The <s>old price</s> new price is $19.99.</p>Documenting Changes
Use s with ins to highlight additions and outdated content within a document.
documenting-changes.html
<p><ins>New content</ins> <s>Old content</s></p>A11y
♿ Accessibility
- Use s semantically — Mark text that is genuinely outdated, not decorative line-through.
- Provide context — Show the replacement value or use
titleto explain why text is struck through. - Do not rely on color alone — Strikethrough line conveys meaning visually; add clear surrounding text.
- Choose del for edits — Screen readers treat
delandswith different semantic roles.
🧠 How <s> Works
1
Author wraps outdated text
Place no-longer-relevant words inside s tags.
Markup
2
Browser adds line-through
Default styles render a strikethrough line across the text.
Render
3
Reader sees updated context
Surrounding normal text shows the current, accurate information.
UX
=
Clear outdated markers
Users instantly see what information has been superseded.
Compatibility
Browser Support
The <s> tag is supported in all major browsers, including Internet Explorer.
Baseline · HTML4 / HTML5
Strikethrough everywhere
All browsers render <s> with a line-through text decoration.
100% Core tag support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportInternet Explorer Fully supported · EOL
Full supportOpera Fully supported
Full support<s> tag 100% supported
Bottom line: Use <s> confidently for outdated text in any browser.
Wrap Up
Conclusion
Effectively using the <s> tag is valuable for web developers looking to convey changes or mark outdated information. By implementing this tag judiciously, you can enhance the clarity of your content and provide a better user experience.
Pro Tips
💡 Best Practices
✅ Do
- Use
sfor outdated or irrelevant information - Combine with
insto document changes - Apply CSS for consistent visual presentation
- Show the replacement value in surrounding text
❌ Don’t
- Use
sfor purely decorative strikethrough - Use obsolete
strikeinstead ofs - Confuse
swithdelfor edit tracking - Strike through without providing updated context
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <s>
Bookmark these before you strike through text.
6
Core concepts 01
Outdated
No longer valid.
Meaning 02
Line-through
Default style.
Visual 03
Not del
Different role.
Semantics 04
With ins
Track changes.
Pattern 05
CSS Style
class / style.
CSS 06
100% Support
All browsers.
Compatibility❓ Frequently Asked Questions
It marks text that is no longer accurate or relevant, such as old prices or deprecated features.
s means no longer relevant. del means removed from the document during editing.No tag-specific attributes. Global attributes like
class and style apply.Yes. Pair
ins for new content with s for outdated content.Yes. Full support in every major browser.
Mark Outdated Text
Practice <s> for strikethrough and change documentation in the Try It editor.
About the author
6 people found this page helpful