HTML の <del>
要素は、文書から削除された文字列の範囲を表します。これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。 <ins>
要素は逆の目的に、文書に追加された文字列を示すために用いることができます。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
一般的にこの要素は (必ずではありませんが) 打ち消し線のスタイルを伴って描画されます。
コンテンツカテゴリ | 記述コンテンツ または フローコンテンツ |
---|---|
許可されている内容 | 透過的コンテンツ |
タグの省略 | 不可。開始と終了タグの両方が必要。 |
許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
許可されている ARIA ロール | すべて |
DOM インターフェイス | HTMLModElement |
属性
この要素はグローバル属性を持ちます。
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>
結果
アクセシビリティの考慮事項
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: " [削除終了] "; }
読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが削除されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
HTML Living Standard <del> の定義 |
現行の標準 | |
HTML5 <del> の定義 |
勧告 | |
HTML 4.01 Specification <del> の定義 |
勧告 |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。