HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<del>
削除(Delete)要素。ドキュメントから削除されたコンテンツの範囲を示します。ブラウザは通常、取り消し線で表示します。
info
概要
<del> 要素は、そのコンテンツがドキュメントの以前のバージョンで削除されたことを示します。コンテンツの変更履歴や校正を示すために使用され、ブラウザでは既定でテキストに取り消し線を引いて表示します。
単に取り消し線を引くだけの目的であれば、CSSの text-decoration: line-through や $``$ 要素を使用することも可能です。
play_circle
デモ (静的表示)
HTML (Source)
<p>
正しい価格は
<del>10,000円</del>
8,000円です。
</p>
<br><br>
<p>
<del datetime="2025-01-01">古い情報</del>
新しい情報
</p>
Preview (Result)
正しい価格は
10,000円
8,000円です。
古い情報
新しい情報
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| cite | 変更が説明されているドキュメントへのURIを示します。変更の理由や詳細な情報源を示すために使用します。 |
| datetime | 変更が行われた日時を示します。有効な日付または時刻の文字列(例: 2025-12-14, 2025-12-14T13:48:00Z)を指定します。 |
code
実用例
1. 変更履歴の明示(挿入されたテキストと組み合わせて)
<p>
当社のサービス料金は
<del>月額 1,000円</del>
<ins>月額 980円</ins>
に変更されました。
</p>
2. 変更日時と情報源を指定
<p>
<del cite="/revision-log.html" datetime="2025-12-10">古い記述です。</del>
正しい記述はこちらです。
</p>
3. ブロック要素全体を削除としてマークアップ
<blockquote>
<del>
<p>この段落全体が削除されました。</p>
<p>理由については、変更履歴のドキュメントを参照してください。</p>
</del>
</blockquote>
lightbulb
知っておくべき重要事項
description
$<\text{del}>$ と $``$ の違い
$`<\text{del}>`$ 要素は、**文書の意味が変更**され、コンテンツが削除されたことを意味するセマンティックな要素です。一方、$``$ 要素は、もはや**正確または関連性がない**ことを示しますが、文書から正式に削除されたわけではないコンテンツ(例: 誤った価格や廃止された製品名)に使用されます。ほとんどの場合、$`<\text{del}>`$ の方がより厳密な意味を持ちます。
$`<\text{del}>`$ 要素は、**文書の意味が変更**され、コンテンツが削除されたことを意味するセマンティックな要素です。一方、$`
accessibility_new
スクリーンリーダーへの配慮
$`<\text{del}>`$ 要素内のテキストは、スクリーンリーダーによって読み上げられる場合があります。文脈によっては、同時に使用される $`<\text{ins}>`$ 要素と合わせて「古い価格は10,000円、新しい価格は8,000円」のように削除・挿入された事実を伝える工夫(例えば、隣接テキストや $`\text{aria}`$ 属性の利用)が望ましい場合があります。
$`<\text{del}>`$ 要素内のテキストは、スクリーンリーダーによって読み上げられる場合があります。文脈によっては、同時に使用される $`<\text{ins}>`$ 要素と合わせて「古い価格は10,000円、新しい価格は8,000円」のように削除・挿入された事実を伝える工夫(例えば、隣接テキストや $`\text{aria}`$ 属性の利用)が望ましい場合があります。