sタグ 既に適切ではなくなった文字列を表す

HTMLの<s>エスタグは、すでに適切・正確ではなくなった内容や、もはや関連しない内容を表します。

😺後ほど詳しく説明しますが、文書の編集で削除したことを表す場合は、sタグではなくdelタグを使います。

<p><s>チケットはコンビニで買うことができます。</s></p>
<p>🙏売り切れました</p>

👆主要ブラウザでは、<s>内のテキストには取り消し線(打ち消し線)が引かれます。これは以下のようなCSSが指定されているためです。

ブラウザのデフォルトCSS
s { 
  text-decoration: line-through;
}

sタグの使いどころ

売り切れを表す

例えば、商品が売り切れたときに、情報を古いものとして表すために使います。

<p><s>チケットはコンビニで買うことができます。</s></p>
<p>🙏売り切れました</p>

古い価格を表す

セールなどで「古い価格に取り消し線をつけて表示したい」ときに使うこともできます。

<p><s>小売希望価格:1,980円</s></p>
<p>1,000円で販売中</p>

このように「正確ではなくなった」情報や「もはや関連しない」情報に<s>を使います。

取り消し線を引きたいだけならCSSを使う

<s>タグは(内容的に)正確ではなくなった/関連しなくなった内容に対してのみ使います。単に取り消し線をひきたいだけなら、CSSを使いましょう。

.line-through {
  text-decoration: line-through;
}

delタグとsタグの違い

分かりづらいのがHTMLの<s>タグと<del>タグの違いです。デフォルトのブラウザ表示は同じで、どちらも取り消し線が引かれます。

<p><del>delを使った場合</del></p>
<p><s>sを使った場合</s></p>

この2つの違いは以下のようになります。

del:削除された文字列を表す(文書の編集ならこっち)

  • 文字列を消した後に、代わりに他の文字列を書く(=変更する)
  • 資料や議事録などの文書を後から書き換える

という場合には<del>を使います。

たとえば、ブログの投稿やニュース、公開資料などの内容を修正したいときには<s>ではなく<del>を使うべきです。

😺このとき、新しく追加した文字列には<ins>タグを使うと良いでしょう。

s:もはや正確ではない文字列を表す

一方で<s>の使いどころは少なく「もう関係ない情報だけど、一応載せておく」というような場合にのみ使います。

strikeタグとの違い

<strike>タグは、<s>と同じ意味で使われていましたが、HTML5では廃止されています。使用しないようにしましょう。