＜s要素＞ - もはや正確ではない、関連がない情報

公開日: 2017/02/09

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要素には、削除や訂正の意味はありません。例えば、誤った価格を案内していたのを訂正する時は、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>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/603/"> <meta charset="utf-8"> <title>【デモ】＜s要素＞ - もはや正確ではない、関連がない情報</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/s/"> </head> <body>

<p>s要素は、もはや関連のない情報をマークアップするための要素です。</p> <p>バーゲン価格: 500円 / <s>定価: 3,000円</s></p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>