SYNCER

SYNCER

<del要素> - 削除された内容

公開日:

del要素は、後から削除されたコンテンツであることを表す要素です。文章の訂正などをマークアップするのに適しています。

概要

名前
del (Delete)
カテゴリー
Flow content
Phrasing content
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
Transparent。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLModElement
デフォルトのスタイル
del {
	text-decoration: line-through;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-del-element

属性

cite

削除の理由が説明されているコンテンツのURL。

datetime

削除した日付、または日時を機械が解釈できる形式で指定する。下記は指定例です。

日付
2017-01-01
日時
2017-01-01 01:30:00

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

del要素は、後から削除したコンテンツをマークアップするための要素です。コンテンツによっては、削除したからといってそのまま取り除くと、後から見たユーザーが混乱してしまうかもしれません。そんな場合にdel要素が有用です。例えば、下記はTodoリストで終了した項目をマークアップしています。

HTML

<h2>私の今年のTodoリスト</h2>

<ul>
	<li>ロゴを作る。</li>
	<li>スタイルシートを1から作り直す。</li>
	<li><del>フッターを作る。</del></li>
	<li><del>ヘッダーを作る。</del></li>
</ul>

デモを開く

追加された内容であることを表すins要素と組み合わせることで、訂正部分を効果的にマークアップできます。下記は、誤った表記の1,500円を削除し、正しい表記の150円を追加した例です。

HTML

<ins>
	<p>表記していた価格に誤りがあったため、訂正します。</p>
</ins>

<p>ミカン: <ins>150円</ins><del>1,500円</del></p>

デモを開く

削除した時間の情報があれば、datetime属性で指定しましょう。表示に影響はありませんが、ユーザーエージェントにより多くの情報を伝えられます。

HTML

<h2>私の今年のTodoリスト</h2>

<ul>
	<li>ロゴを作る。</li>
	<li>スタイルシートを1から作り直す。</li>
	<li><del datetime="2017-05-17">フッターを作る。</del></li>
	<li><del datetime="2017-05-23">ヘッダーを作る。</del></li>
</ul>

「一時的に無関係な情報」をマークアップするのに、del要素は適していません。例えば、「バーゲンセール中の値下げ価格」に対する「定価」などがそうです。定価はバーゲンセールが終了したら復活する情報なので、削除されたコンテンツではありません。この場合は、del要素ではなく、「無関係なコンテンツ」を意味するs要素がマークアップに適しています。

HTML

<!-- 定価は削除されたわけではない -->
<p>バーゲン価格: 500円 / <s>定価: 3,000円</s></p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<del要素> - 削除された内容</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/del/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>del要素は、削除された内容であることを表す要素です。</p>

<ins>
	<p>表記していた価格に誤りがあったため、訂正します。</p>
</ins>

<p>ミカン: <ins>150円</ins><del>1,500円</del></p>

	</body>
</html>

デモを開く

デモ

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

<body> <div id="___body">

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

<style>

</style>

<script>

</script>