On a discounted product page, the old price shows up crossed out next to the new one. On a task list, a cancelled line stays visible, crossed out too, while the rest of the list keeps working normally.
In both cases, the struck-through text is not a mere graphic whim: it carries a precise meaning, that of content which was once true or relevant and no longer is. That is exactly what the <s> tag is meant to say, provided it is not confused with a tracked editorial change or with a purely visual style.
Definition
<s> (for strikethrough) wraps content that is no longer accurate, valid or relevant, while staying on the page to give the reader context. The browser draws a horizontal line through it by default, but that style is only a consequence of its meaning, never the reason it exists.
What <s> does not say is that an edit took place and can be traced back: that role belongs to <del>. <s> simply flags content as outdated, with no history and no intention of tracking anything.
Syntax and minimal markup
The tag is an inline element: it wraps a fragment of text inside a sentence or a larger element, without creating a new block. It carries no specific attribute, only the global ones such as class or id.
<p>Subscription: <s>$9.99 per month</s> $6.99 per month</p>Nothing stops you nesting it in a heading, a list item or a table cell: it behaves like any other inline text sitting inside a sentence.
Concrete example
Here is a product card where the old price stays visible to show the size of the discount, one of the most common uses of this tag.
<div class="price">
<s>$89</s>
<strong>$54</strong>
<span class="visually-hidden">previous price:</span>
</div>The visually hidden span adds a cue that the struck-through style alone does not guarantee for everyone, a point covered in the next section.
Semantics and accessibility
Screen reader support for struck-through text is uneven: some announce it, others ignore it depending on the settings chosen by the person using them. Never rely on the visual style alone to carry an important piece of information, always add a written cue such as "previous price" or "cancelled".
For a search engine as much as for a screen reader, <s> remains a quiet signal: it says the content is dated, without guaranteeing it will be highlighted or even perceived by everyone. It is a complement to the text, never a substitute for a clear explanation.
Difference with <del> and with a purely visual line
Three ways of crossing out text exist across HTML and CSS, and they are not interchangeable.
| Tool | What it means | Typical use |
|---|---|---|
<s> | Content that is no longer accurate or relevant, with no tracked edit | A discounted price, an option removed from a menu |
<del> | A tracked edit, with an editing history | Tracked changes in a contract, a corrected article |
CSS text-decoration: line-through | None, purely visual | A decorative style with no intended meaning |
<del> is often paired with <ins>, which shows the opposite: what was added. Together they tell the story of an edit, with attributes such as cite or datetime to state when and why. <s> carries none of that: it never claims that an edit happened, only that the content is no longer current.
As for CSS alone, it carries no information for assistive technology or search engines: text struck through only in CSS remains, semantically, ordinary text. Keep that technique for purely decorative effects with no bearing on meaning.
Best practices
Use <s> only for content that used to be correct or relevant and no longer is: an outdated price, an option removed from a form, a sports score corrected after a review. Never reach for it purely for the visual effect of the line, or to style a heading or a tagline.
Always pair the struck-through text with a written cue when the meaning genuinely matters, rather than relying on appearance alone. Keep the tag short too: a whole paragraph struck through reads poorly and loses its effect as a punctual annotation.
Frequently asked questions
Can <s> be used for a crossed-out price on a product page?
Yes, it is one of the most common and legitimate uses of this tag. The old price stays historically true, it simply is no longer the price in effect, which is exactly what <s> is meant to express.
Should <s> or <del> be used to show a change in a collaborative document?
<del> fits better whenever a change needs tracing, with a date and a reason, as in a revised contract or an article corrected after publication. <s> stays preferable when the point is only to flag that content is no longer current, without narrating the editing history.
Does a screen reader always announce struck-through text?
No, behaviour varies widely from one screen reader to another and depends on settings chosen by the person using it. Some announce the strikethrough style, others read it as plain text without announcing anything, which is exactly why a written cue matters whenever the information is important.