sタグ -関連性がなくなったテキストを示す｜HTML辞典
<s>タグとは？
<s> タグは、もはや有効でない、または関連性がなくなったテキストを示すためのタグです。
一般的に 価格の変更や古い情報を示す際 に使用されます。
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）。
閉じタグの有無
<s> は 開始タグ（<s>）と閉じタグ（</s>）の両方が必要 です。
基本的な記述方法
<p>通常価格 <s>5,000円</s> → セール価格 3,500円！</p>
使用できる主な属性
<s> タグには特別な属性はありません。
CSSを使ったデザイン変更
<s> タグのデフォルトのスタイルは 取り消し線（text-decoration: line-through;）ですが、独自のスタイルを適用できます。
s {
color: gray;
text-decoration: line-through;
font-style: italic;
}
適切な使用例
✅ 割引前の価格を示す
<p>通常価格: <s>12,800円</s> → セール価格: 9,800円</p>
✅ 古い情報を示す
<p>このイベントは <s>2024年5月開催予定</s> ですが、新たに6月に変更されました。</p>
✅ 修正された内容を示す
<p><s>旧サイトURL: example-old.com</s> 新サイトはこちら → <a href="https://example.com">example.com</a></p>
適切でない使用例（誤った使い方）
❌ <s> を単なる強調目的で使用する
<!-- NG: 取り消し線を強調用途で使用 -->
<p>この製品は <s>とても人気</s> です。</p>
✅ 正しい書き方（削除や無効な情報として使用）
<p>この製品の旧モデルは <s>販売終了</s> しました。</p>
❌ <del> と <s> の違いを理解せずに使う
<!-- NG: `<s>` を削除した情報として使用 -->
<p>新しい利用規約：<s>ユーザー登録は不要です。</s></p>
✅ 正しい書き方（削除された情報は <del> を使用）
<p>新しい利用規約：<del>ユーザー登録は不要です。</del></p>
<s>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<s> | 無効・関連性のない情報を示す | 取り消し線が適用される | 旧価格、廃止情報 |
<del> | 削除されたテキストを示す | 変更履歴の記録向け | 文章の修正履歴 |
<ins> | 追加された情報を示す | del と対で使用可能 | 修正された新情報 |
使用上の注意点
✅ <s> は削除ではなく、無効・関連性のない情報に使用する
- 削除の履歴を残す場合は
<del>を使用するのが適切。
✅ <s> で削除線を適用する場合、視覚的に区別する工夫を
- CSS を適用して、色を変えるなどの工夫をすると可読性が向上する。
関連タグ
まとめ
<s> タグは、HTML文書内で 無効または関連性がなくなった情報を示すためのタグ です。
価格の変更や、過去の情報を明示する際に使用すると、視覚的に分かりやすくなります。
