<s>

HTML の <s> 要素は取り消し線を引いた文字列を表示します。 <s> 要素はすでに適切または正確ではなくなった事柄を表現します。しかし、文書の修正を示す場合、 <s> 要素は適切ではありません。この場合は <del> と <ins> の方が適しているので、こちらを使用してください。

試してみましょう

コンテンツカテゴリ 記述コンテンツ, フローコンテンツ
許可されている内容 記述コンテンツ
タグの省略 不可。開始と終了タグの両方が必要。
許可されている親要素 記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール 対応するロールなし
許可されている ARIA ロール すべて
DOM インターフェイス HTMLElement

属性

この要素にはグローバル属性のみがあります。

メモ: 実装におけるメモ: Gecko 1.9.2 以前はこの要素に HTMLSpanElement インターフェイスを実装しています。

例

<s>本日のおすすめ: サーモンカルパッチョ</s> 売り切れ<br>
<span style="text-decoration:line-through;">本日のおすすめ:
  サーモンカルパッチョ</span> 売り切れ

アクセシビリティの考慮

s 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の content プロパティを、 ::before および ::after 擬似要素と共に使うことでアナウンスさせることができます。

s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [取り消しテキスト開始] ";
}

s::after {
  content: " [取り消しテキスト終了] ";
}

読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが取り消しされていることを知らないと理解に影響するような場面でのみ使用するようにしてください。

仕様書

Specification
HTML Standard
# the-s-element

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • <strike> 要素は、 <s> 要素の分身でしたが、廃止されており、もうウェブサイトで使用するべきではありません。
  • <del> 要素は、データが削除された場合に代わりに使用するべきものです。
  • CSS の text-decoration-line プロパティは、 <s> 要素の以前の視覚効果を実現します。