HTML <s> Tag
The HTML <s> tag marks text that is no longer accurate or relevant (e.g. an old price). See how it differs from <del> and <strike>, with examples.
The HTML <s> tag marks text that is no longer accurate or relevant — but was not literally deleted from the document. It is an inline element, and browsers render its content with a strikethrough (a horizontal line through the text) by default.
A classic use is showing a discounted price: the old price stays visible but struck through, next to the current sale price. This tells the reader "this used to be true; here is what's true now."
<s> is a valid HTML5 element — it is not deprecated. The deprecated tag is <strike>, which you should never use in new pages. Reach for <s> (semantics) or CSS text-decoration: line-through (pure styling) instead.
Syntax
The <s> tag comes in pairs. The content goes between the opening (<s>) and closing (</s>) tags.
Example — the price-strikethrough use case
This is the most common, idiomatic use of <s>: the original price is no longer relevant, so it is struck through, while the sale price is shown as current.
HTML <s> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
Hurry, sale ends soon!
<s>Was $50.00</s>
<strong>Now $29.99</strong>
</p>
</body>
</html>Result
<s> vs <del> vs <strike>
These three tags all produce a line through text, but they mean very different things. Choosing the right one is what makes your HTML semantic rather than just visually decorated.
| Tag | Meaning | Use it when… | Status |
|---|---|---|---|
<s> | Content is no longer accurate or relevant | An old price, an outdated detail, a recommendation that has changed — the original text was never "removed", it is just superseded. | Valid HTML5 |
<del> | Content was deleted / removed as an editorial change | Tracking edits to a document. Pairs naturally with <ins> for inserted text. Supports cite and datetime to record why and when. | Valid HTML5 |
<strike> | Strikethrough (presentation only) | Never — use <s> or <del> instead. | Deprecated |
In short: use <s> when the meaning is "this is no longer the case," and use <del> when the meaning is "this was edited out." If you only need the visual line and there is no special meaning, use CSS text-decoration: line-through on a plain element.
Accessibility
By default, screen readers do not announce the strikethrough — assistive technology reads <s> content the same as any other text. So a sighted user sees "Was $50.00" crossed out, but a screen-reader user may just hear "Was $50.00" with no hint that it is outdated.
For cases where the struck-through state carries important meaning, add visually-hidden text that spells it out:
<p>
<s><span class="visually-hidden">Old price: </span>Was $50.00</s>
<strong>Now $29.99</strong>
</p>.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}Attributes
The <s> tag supports the Global attributes and the Event Attributes. It has no attributes of its own.
Styling
Browsers already apply text-decoration: line-through to <s>, so you do not need CSS just to get the line. Styling is an optional override — for example, to colour the struck-through text without re-declaring the line:
s {
color: gray;
}