The <s> tag in HTML is used to render text with a strikethrough (a horizontal line through it). It indicates that the content is no longer accurate, valid, or relevant, but should remain visible to show historical context or changes.
📌 What Is the <s> Tag?
- The
<s>tag stands for “strikethrough.” - It is an inline element.
- It has a semantic purpose: to show that the text is no longer correct or applicable.
- Different from
<del>, which implies content was removed in editing or revision history.
✅ Basic Syntax
<p>This product is <s>$49.99</s> now only $29.99!</p>
Output:
This product is $49.99 now only $29.99!
🧩 Structure Diagram
<p>
Text before
<s>Obsolete or incorrect text</s>
Text after
</p>
🧪 Example 1: Marking Outdated Prices
<p>
Sale: <s>$100</s> $70 — limited time offer!
</p>
This shows the original price is no longer applicable but still visible for comparison.
🧪 Example 2: Marking Obsolete Job Title
<p>
<s>Junior Developer</s> Full Stack Engineer
</p>
The old role is struck through to indicate a change or promotion.
🔁 <s> vs <del> vs <strike>
| Tag | Purpose | Semantic? | Display |
|---|---|---|---|
<s> | Outdated or incorrect info | ✅ Yes | Strikethrough |
<del> | Removed content (e.g., revisions) | ✅ Yes | Strikethrough + change tracking |
<strike> | Deprecated, use <s> instead | ❌ No | Strikethrough |
🎨 Styling <s> with CSS
You can customize the look of strikethrough text:
s {
color: red;
text-decoration: line-through dotted;
}
💡 When to Use <s>
- Show outdated or incorrect information that has been replaced.
- Indicate price reductions or changes in deals.
- Annotate updated roles, names, or dates.
- Use in UI elements like to-do lists or revision histories.
⚠️ Best Practices
- Do not use
<s>just for decoration — it has meaning! - If you’re tracking edits, use
<del>and<ins>. - Don’t confuse
<s>with<strike>— the latter is obsolete.
🏁 Summary
The <s> tag is perfect for displaying text that is no longer accurate, still visible for context, and semantically meaningful. Whether you’re showing revised prices, updated job titles, or historical corrections, <s> helps users understand what’s changed.