HTML <s> Tag

The HTML <s> tag is used to indicate that text has been rendered incorrect, irrelevant, or no longer accurate. Visually, the <s> tag applies a strikethrough effect to the text, signifying its outdated or invalid status while keeping it readable for reference purposes.

The <s> tag is typically used in contexts like marking deprecated content, displaying outdated prices, or showing edits in text documents.

Basic Syntax of HTML <s> Tag

The basic structure of the <s> tag is:

</>
Copy
<s>Strikethrough Text</s>

The browser applies a strikethrough style to the enclosed text.

Example of Using the <s> Tag

Here’s an example of marking an outdated price in an e-commerce context:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Product Pricing</h2>
        <p>Original Price: <s>$100</s> Now: $80</p>
    </body>
</html>
Example of Using the <s> Tag

Explanation: The original price of $100 is crossed out using the <s> tag, indicating it is no longer valid. The current price of $80 is displayed without strikethrough.

Styling the <s> Tag with CSS

You can customize the appearance of text within the <s> tag using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            s {
                color: red;
                text-decoration: line-through;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Styled Strikethrough</h2>
        <p>This item was <s>out of stock</s> but is now available!</p>
    </body>
</html>
Styling the <s> Tag with CSS

Result: The strikethrough text is styled with a red color and italicized font for emphasis.

Attributes of HTML <s> Tag

  • Global Attributes: Supports all global attributes, such as id, class, and style.
  • Event Attributes: Allows event handlers like onclick, onmouseover, etc.

These attributes can be used to apply additional styles or interactivity to the <s> tag.

Difference Between <s> and Similar Tags

  • <s>: Represents text that is no longer accurate or relevant, such as deprecated content or incorrect values.
  • <del>: Represents text that has been removed from a document, often with a semantic indication of deletion.
  • <strike>: Deprecated tag similar to <s>, used for strikethrough in older HTML versions.

Use the <s> tag for visual strikethroughs that don’t imply semantic deletion, while the <del> tag should be used for content removed for semantic reasons.

Practical Applications of the <s> Tag

  • Pricing: Display original prices alongside discounted prices.
  • Corrections: Mark text as incorrect or outdated without removing it entirely.
  • Editorial Changes: Show edits in documents, articles, or reviews for transparency.
  • UI Notifications: Indicate unavailable or deprecated options in dropdowns, forms, or menus.