HTML <del>

del要素は文書から削除されたコンテンツを表す。ウェブブラウザで文書を表示したとき、削除されたコンテンツには取り消し線が引かれる。

タグ

<del>
  <!-- Transparent content -->
</del>

開始タグと終了タグは省略できません。開始タグと終了タグの間にはブロック要素またはインライン要素が任意回数表れます。

属性

次に示す属性をdelタグに指定できる。

cite
削除した理由に関する情報のURI 
<del cite="https://segakuin.com/html/del.html">example</del>

example

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
datetime
削除した日付と時刻 
<del datetime="2021-11-05T01:25-07:00">example</del>

example

id
HTML文書内で一意な要素の識別子を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。 
<del style="color: gray;">example</del>

example

ondblclick
要素がダブルクリックされたときに実行するJavaScriptを指定する。
title
アドバイス情報を指定する。 
<del title="example">example</del>

example

内容

del要素はトランスペアレント・コンテンツを内容に含めることができる。具体的には、次に示す要素である。

例

DEL 要素の使用例を次に示します。

Extensible <del>HyperText</del> Markup Language

DEL 要素の表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。

Extensible HyperText Markup Language

取り消し線の色を変える

del要素の取り消し線の色を変えるには、CSSのcolorプロパティで色を指定する。

The <del style="color: red;">quick brown</del> fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

ただし、この方法では取り消し線だけでなく、文字の色も変わる。

取り消し線だけの色を変えるには、CSSのtext-decorationプロパティを使う。text-decorationプロパティは取り消し線の色だけでなく、太さや線の種類も指定できる。

The <del style="text-decoration: line-through red;">quick brown</del> fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

<s> タグとの違い

<s>タグは、もはや正確ではない、または関連性の無いコンテンツを表す。

<s>タグは、文書の編集を示す場合には適切ではない。文書から削除されたテキストを表すには、<del>タグを使用する。

JavaScript

JavaScriptからはHTMLModElementインタフェースを通じてdel要素へアクセスできる。

HTMLModElementインタフェースには次に示すプロパティがある。

accessKey
del要素のaccesskey属性
autocapitalize
del要素のautocapitalize属性
cite
del要素のcite属性 
console.log(document.getElementById("example").cite)
dateTime
del要素のdateTime属性 
console.log(document.getElementById("example").dateTime)
dir
del要素のdir属性
draggable
del要素のdraggable属性
hidden
del要素のhidden属性
lang
del要素のlang属性
spellcheck
del要素のspellcheck属性
title
del要素のtitle属性
translate
del要素のtranslate属性

関連ページ

<ins>

参考文献

WHATWG (2021) "The del element" HTML Living Standard

IETF (2002) RFC3339