HTML / HTML Tags

HTML <S> Tag

Oct 12, 2022
2 min read
HTML s Tag

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