<del>タグの解説
<del>は、文書の中で編集によって削除された範囲を表します。公開済みのドキュメントを編集した際に、訂正した内容や終了した予定などを削除しつつ、文面には残したいに場合に有効です。指定された範囲は、見た目上の装飾として打ち消し線が引かれます。「del」とは英語で削除を表す「delete」の略語です。
この要素で削除された内容に関する具体的な日時や参照先のURLを、属性を使って付与することもできます。削除された項目に新たな内容が追加された場合は、<ins>で示すことができます。
<del>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果として打ち消し線が引かれます。これはユーザーエージェントの既定スタイルによるものです。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<del>要素に指定できる属性
cite- 変更が加えられた情報に関する参照先のURLを指定できます。
datetime- 変更が加えられた日時をタイムスタンプ形式で表します。例：YYYY-MM-DDThh:mm:ssTZD
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<del>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。公開されたドキュメントに編集が加わり、削除された部分を表します。
<del>delete</del>
基本的には、同一の段落の中で削除または訂正された部分を表すために使用します。
<p>Text <del>delete</del> text.</p>
この要素は暗黙の段落を横断するような形で配置してはいけません。一つの削除項目は一つの<del>要素として扱い、分割できるものは新たな<del>要素として扱うべきです。
// 誤った書き方
<del>
<p>Delete some text.</p>
Another text.
</del>
// 正しい書き方
<del>
<p>Delete some text.</p>
</del>
<del>
Another text.
</del>
この要素は、ユーザーの操作やスクリプトを通じて状態が変化するような場所にも活用できます。例えば、以下のように「ToDo List」の項目が達成あるいは期限が過ぎた際に作動するものです。
<div class="sample-block">
<h2>ToDo List</h2>
<ul>
<li>今日やるべきこと</li>
<li><del datetime="2045-10-09T23:59">昨日やるべきこと</del></li>
<li><del datetime="2045-10-08T23:59">一昨日やるべきこと</del></li>
</ul>
</div>
<ins>要素と併用する
<del>は編集（エディット）の意図を表す要素であり、同じく編集を表す要素として<ins>と併用できます。それぞれのスタイルシートを調整して、削除された範囲と追加挿入された範囲が分かりやすく表現してみましょう。
p del {
text-decoration: line-through rgb(0 0 0 / 0.5);
background-color: rgb(255 0 0 / 0.3);
}
p ins {
text-decoration: underline rgb(0 128 0 / 1);
background-color: rgb(0 255 0 / 0.3);
}