<del>: 削除文字列要素

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

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

属性

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

cite

変更についての説明を記したリソース（例えば、議事録など）への URI を示す。

datetime

この属性は変更日時を示し、有効な日付文字列と任意の時刻文字列でなくてはなりません。値を時刻および日付の文字列として解釈できない場合は、要素に関連付けられたタイムスタンプはないものと解釈されます。

例

<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>

結果

This text has been deleted, here is the rest of the paragraph.

This paragraph has been deleted.

アクセシビリティの考慮事項

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

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: " [削除終了] ";
}

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

• Short note on making your mark (more accessible) | The Paciello Group
• Tweaking Text Level Styles | Adrian Roselli

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• テキストへの挿入を示す <ins> 要素

• テキストの削除とは異なる抹消を表すための <s> 要素