<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円
を追加した例です。
削除した時間の情報があれば、datetime属性で指定しましょう。表示に影響はありませんが、ユーザーエージェントにより多くの情報を伝えられます。
HTML
<h2>私の今年のTodoリスト</h2>
<ul>
<li>ロゴを作る。</li>
<li>スタイルシートを1から作り直す。</li>
<li><del datetime="2017-08-15">フッターを作る。</del></li>
<li><del datetime="2017-08-21">ヘッダーを作る。</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>