HTML s Tag: How it Works with Examples

The HTML s tag places a line across text that has no longer value or does not hold importance. It helps readers see words that lost meaning in a direct way.

What is the <s> Tag in HTML?

The <s> tag draws a strike line across text. It marks text that should not carry weight but still must remain visible on the page.

Here is the basic tag:

<s>Old price</s> New price

The tag above keeps the word “Old price” but shows it as crossed out.

Here is a quick example:

<p>My favorite color is <s>blue</s> red.</p>

The output shows “blue” with a strike line and “red” as the new value.

The Difference Between <s> Tag and <del> Tag

The <s> tag strikes text for style and meaning shift. The text stays, but looks marked as not valid.

The del tag means the text was deleted. It shows removed content in a semantic way for screen readers and search engines.

Here is a table that shows you the key differences between them:

You use the s tag when you want to show words that lost weight but must still remain. The del tag fits when you want to mark removed text in a document or revision.

The s tag works in all modern browsers such as Chrome, Firefox, Safari, Edge, and Opera. Old versions of Internet Explorer also support it.

How to Style the <s> Tag with CSS

You can style the s tag with CSS. You may change the strike line color, style, or even replace it with a custom design.

s {
  color: gray;
  text-decoration: line-through red;
}

This rule paints the strike line red and the word gray.

Examples of <s> Tag in HTML

Old price with new price:

<p><s>$100</s> $80</p>

This shows the first price with a strike line and the second price as the valid one. The reader sees the discount in a direct way without words.

Corrected word in a sentence:

<p>He moved to <s>London</s> Paris last year.</p>

This marks the first word as not valid and keeps Paris as the right city. It does not delete the old word from view.

Custom style with CSS:

<style>
s {
  text-decoration: line-through double blue;
  font-weight: bold;
}
</style>
<p><s>Closed</s> Open Now</p>

This uses a double blue strike line and bold text. It adds more weight to the visual change and guides readers to the valid state of the message.

Show old rules on a notice board:

<p><s>No entry after 9 PM</s></p>
<p>New entry rule: open until midnight</p>

The first rule remains struck to show that it lost value, and the new rule is displayed below. This method helps when you update public rules or notes.

Wrapping Up

In this article, you understood how to use the tag and the differences between it and the tag in HTML.

Here is a quick recap:

• The <s> tag helps you to put a line through the text that is no longer important but still visible.
• The <del> tag marks deleted text and has semantic use.
• You can style the strike line with color.

FAQs

<p>Old price: <s>$50</s></p>

<p>Old: <s>Feature X</s>, Removed: <del datetime="2025-01-01">Feature Y</del></p>

<style>
s { color: red; text-decoration: line-through; }
</style>
<p>Outdated: <s>This offer</s></p>

Similar Reads