<s要素> - もはや正確ではない、関連がない情報
公開日:
s要素は、もはや関連のなくなった情報を表す要素です。例えば、バーゲン価格と定価を併記する場合に、定価の方をマークアップするのに適しています。打ち消し線を表示する目的で利用してはいけません。
概要
- 名前
- s (Struck text)
- カテゴリー
- Flow content
- Phrasing content
- Palpable content
- 配置できる場所
- Phrasing contentが期待される場所。
- コンテンツモデル
- Phrasing content。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLElement
- デフォルトのスタイル
s { text-decoration: line-through; }
- 仕様書
- https://html.spec.whatwg.org/multipage/semantics.html#the-s-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
関連性のない情報
s要素は、もはや正確じゃない、関連性のない情報を表します。例えば、バーゲンセール案内の定価部分をマークアップするのに適しています。現在はバーゲン価格が正確な情報であり、定価は正確な価格ではありません。
HTML
<p>バーゲン価格: 500円 / <s>定価: 3,000円</s></p>
削除、訂正の意味はない
s要素には、削除や訂正の意味はありません。例えば、誤った価格を案内していたのを訂正する時は、s要素ではなくdel要素でマークアップしましょう。
HTML
<p>誤った価格を掲載していたため、訂正しました。</p>
<!-- 間違った例 -->
<p>正しい価格: 500円 (<s>700円</s>)</p>
<!-- 正しい例 -->
<p>正しい価格: 500円 (<del>700円</del>)</p>
打ち消し線
打ち消し線でテキストを装飾する目的でs要素を使ってはいけません。s要素の代わりにスタイルシートを利用して下さい。
HTML
<!-- 間違った例 -->
<p>私は<s>かっこいい</s>ダサい人間だ。</p>
<!-- 正しい例 -->
<p>私は<span class="aaa">かっこいい</span>ダサい人間だ。</p>
CSS
.aaa {
text-decoration: line-through ;
}
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<s要素> - もはや正確ではない、関連がない情報</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/s/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>s要素は、もはや関連のない情報をマークアップするための要素です。</p>
<p>バーゲン価格: 500円 / <s>定価: 3,000円</s></p>
</body>
</html>