HTML <s> Element

Publish in HTML Tutorial el 25/05/2025 15:58

The <s> element is used to represent text that is no longer accurate or relevant, typically displayed with a strikethrough effect. Unlike <del> which indicates deleted text in a document's revision process, <s> is used for content that is no longer correct but not necessarily deleted in a formal sense.

Basic Usage

Here's how to use the <s> element in its simplest form:

When rendered, it will appear like this: ~~This text is no longer accurate~~

When to Use <s>

To mark outdated information
To show prices during sales (original price strikethrough)
To indicate completed tasks (though <del> might be more semantic)
To show text that is no longer relevant but shouldn't be completely removed

Examples of <s> Element Usage

Example 1: Sale Pricing

Common e-commerce pattern showing original and sale prices:

Play Code

    <p>Product: Super Widget 3000</p>
<p><s>Original price: $199.99</s></p>
<p>Sale price: $149.99 (25% off!)</p>

Example 2: Outdated Information

Showing corrected information while keeping the original (now incorrect) text:

Play Code

<p>The meeting was originally scheduled for <s>Friday</s> 
Monday at 2:00 PM in Conference Room B.</p>

Example 3: Styling with CSS

Customizing the appearance of the strikethrough:

Play Code

<style>
  s.custom-strike {
    text-decoration: none;
    position: relative;
  }
  s.custom-strike::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: red;
    transform: rotate(-10deg);
  }
</style>
<p>This is <s class="custom-strike">normal strikethrough</s> 
custom strikethrough text.</p>

Example 4: JavaScript Interaction (Toggle)

Using JavaScript to toggle strikethrough on click:

Play Code

<p>Click items to mark them as complete:</p>
<ul>
  <li onclick="this.innerHTML = this.querySelector('s') ? 
    'Buy milk' : '<s>Buy milk</s>'">Buy milk</li>
  <li onclick="this.innerHTML = this.querySelector('s') ? 
    'Pay bills' : '<s>Pay bills</s>'">Pay bills</li>
  <li onclick="this.innerHTML = this.querySelector('s') ? 
    'Call mom' : '<s>Call mom</s>'">Call mom</li>
</ul>

Example 5: JavaScript Animation

Animating the strikethrough effect with JavaScript:

Play Code

<style>
  .animate-strike {
    position: relative;
    display: inline-block;
  }
  .animate-strike::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 2px;
    background: black;
    transition: width 0.5s ease;
  }
  .animate-strike.struck::after {
    width: 100%;
  }
</style>
<p>Click to strike: <span id="strikeMe" class="animate-strike" 
onclick="this.classList.toggle('struck')">this text</span></p>

Tips and Best Practices

Use <s> for stylistic strikethroughs, not for document edits (use <del> for that)
Consider adding ARIA attributes if the strikethrough conveys important semantic meaning
You can customize the strikethrough appearance with CSS
Don't overuse strikethrough as it can make text harder to read
For prices, consider pairing <s> with <ins> for the new price