HTML <s> tag

By Jonathan Griffin. Editor, SEO Consultant, & Developer.

· 2 min read

Definition

The <s> tag is used to mark content that is no longer accurate or relevant with a strikethrough. It is not suitable to indicate document edits; use the <del> element instead.

Example

<p>The following items are on sale:</p>
<ul>
  <li>4 Spoons</li>
  <li><s>4 forks</s> 2 forks</li>
  <li>4 candles</li>
</ul>

The following items are on sale:

  • 4 Spoons
  • 4 forks 2 forks
  • 4 candles

Usage

  • Both the starting and closing tags are required.
  • Do not use for marking up document edits. You should use the <ins> and <del> elements instead.

Attributes

The <s> element only supports the Global Attributes.

Best Practices

  • Most screen readers do not announce the <s> element. You can use CSS to add hidden content before and after the <s> element, which screen readers will announce.

    For example, you can adapt this technique:

    <style>
    s::before, s::after {
      content:" [Deletion start] ";
      clip-path: inset(100%);
      clip: rect(1px, 1px, 1px, 1px);
      height: 1px;
      width: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
    }
    s::after {
      content:" [Deletion end] ";
    }
    </style>
    <p>
      <s>This deleted text</s> is shown with a strike through.
    </p>
    Some users of screenreaders may disable announcing such long-winded content, so the best practice is probably to avoid using the <s> element unless absolutely necessary.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes