タイトル: del要素
SEOタイトル: HTML del要素 完全ガイド（取り消し線 / 削除済みコンテンツ / ins要素との対比 / cite/datetime属性）
| この記事の要点 |
|
del 要素とは
（deleted）は削除されたテキストを表す HTML 要素です。HTML4 の頃から存在し、デフォルトのスタイルは取り消し線（text-decoration: line-through）。意味的には「以前は載っていたが取り消された情報」を表現します。
基本構文
定価 1980円 特価 980円
会議は 3月10日 3月15日 に変更されました。
属性
| 属性 | 意味 | 例 |
|---|---|---|
cite | 削除理由を説明する URL | cite="/changelog" |
datetime | 削除日時（ISO 8601） | datetime="2026-03-15T10:00" |
料金は 月額500円
月額780円 に改定されました。
と と の違い
| 要素 | 意味 | 用途 | 現状 |
|---|---|---|---|
| 編集により削除されたテキスト | 編集履歴・訂正 | HTML5 推奨 |
| もはや正確でない / 関連性のないテキスト | 無効化された情報（在庫切れ等） | HTML5 推奨 |
| 取り消し線（装飾のみ） | 装飾 | HTML5 で廃止 |
意味の使い分け:
- 編集で消えた（前の版にはあった）→
- もう正しくない（在庫切れ、終了したキャンペーン）→
- 単なる装飾 → CSS の
text-decoration: line-through
ブロックレベルとインラインの両方で使える
料金は 500円 780円
この機能は廃止されました。
代わりに新機能をお使いください。
CSS でスタイル変更
/* デフォルトの取り消し線を消す */
del {
text-decoration: none;
color: #999;
}
/* 取り消し線の色を変える */
del {
text-decoration: line-through #d00 2px;
}
/* ホバー時のみ取り消し線表示 */
del { text-decoration: none; }
del:hover { text-decoration: line-through; }SEO とアクセシビリティ
スクリーンリーダーは多くの場合 text-decoration: line-through だけだと読み上げは変化しません。意味的に削除を伝えたい場合は必ず
SEO 観点では、Google は 等で明示しておくと、検索ユーザーが現状を理解しやすくなります。
典型ユースケース
- 価格訂正:
1980円980円 - 記事の更新履歴: 「以前は誤って〜と記載していました」
- ToDo リスト: 完了タスクに
- 差分表示: 旧版を
FAQ
Q: 取り消し線だけ表示したい場合は？
A: 編集による削除でないなら span style="text-decoration:line-through"。
Q: datetime 属性のフォーマットは？
A: ISO 8601 形式。日付のみなら 2026-03-15、時刻まで含めるなら 2026-03-15T10:30:00+09:00。タイムゾーンを明示するなら末尾に +09:00 または Z（UTC）。
Q: と をネストできる？
A: 可能。例えば「以前は削除されていた追加文」を表すような複雑な編集履歴も表現できます。ただし、可読性の観点から多重ネストは避けるべきです。
Q: GitHub の差分表示のように使える？
A: 段落単位の差分は で表現できます。コードの行単位差分には 内で個別に色付けする方法が一般的です。
HTML5 仕様の参考
HTML5 で はカテゴリとしては「フローコンテンツ」と「フレージングコンテンツ」の両方になる珍しい要素です。これによりブロック要素を子に含めても OK、段落の中に置いても OK という柔軟性を実現しています。仕様上は HTML4 から存在しますが、HTML5 で cite と datetime 属性が標準として整理されました。
関連
- ins 要素 — 追加されたテキスト
- s 要素 — もはや正確でないテキスト
- strike 要素 — HTML5 で廃止された取り消し線要素
- blockquote 要素 — 引用ブロック（cite 属性が同様）
- mark 要素 — ハイライト表示