<del>: 削除済みテキスト要素

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

<del> はHTML の要素で、文書から削除された文字列の範囲を表します。これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。<ins> 要素は逆の目的に、文書に追加された文字列を示すために用いることができます。

試してみましょう

<blockquote>  There is <del>nothing</del> <ins>no code</ins> either good or bad, but  <del>thinking</del> <ins>running it</ins> makes it so.</blockquote>

del {  text-decoration: line-through;  background-color: #fbb;  color: #555;}ins {  text-decoration: none;  background-color: #d4fcbc;}blockquote {  padding-left: 15px;  border-left: 3px solid #d7d7db;  font-size: 1rem;}

一般的にこの要素は（必ずではありませんが）打ち消し線のスタイルを伴って描画されます。

コンテンツカテゴリー	記述コンテンツ、フローコンテンツ
許可されている内容	透過的コンテンツ
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール	対応するロールなし
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLModElement`

属性

この要素はグローバル属性を持ちます。

cite: 変更についての説明を記したリソース（例えば、議事録など）への URI を示す。
datetime: この属性は変更日時を示し、有効な日付文字列と任意の時刻文字列でなくてはなりません。値を時刻および日付の文字列として解釈できない場合は、要素に関連付けられたタイムスタンプはないものと解釈されます。日付のない文字列の書式については、日付の文字列を参照してください。日付と時刻の両方を含んだ文字列の書式は、地方時の日付と時刻の文字列にあります。

例

html

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p><del><p>This paragraph has been deleted.</p></del>

結果

アクセシビリティの考慮

del 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS のcontent プロパティを::before 及び::after 擬似要素と共に使うことでアナウンスさせることができます。

css

del::before,del::after {  clip-path: inset(100%);  clip: rect(1px, 1px, 1px, 1px);  height: 1px;  overflow: hidden;  position: absolute;  white-space: nowrap;  width: 1px;}del::before {  content: " [削除開始] ";}del::after {  content: " [削除終了] ";}

スクリーンリーダーを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが削除されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。