この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:guest
更新日時:2026-06-11 07:10:02

タイトル: del要素
SEOタイトル: HTML del要素 完全ガイド（取り消し線 / 削除済みコンテンツ / ins要素との対比 / cite/datetime属性）

この記事の要点
  • は削除されたテキストを表す HTML 要素で、デフォルトで取り消し線が表示される
  • 対になる要素は <ins>（追加されたテキスト、下線で表示）
  • cite 属性で削除理由を説明するページ URL、datetime 属性で削除日時を指定できる
  • CSS の text-decoration:line-through とは意味が違う — 単なる装飾なら <s> や CSS、編集履歴なら <del> を使う
  • 価格訂正や記事の更新履歴を表現する際に SEO / アクセシビリティ的に正しい選択

del 要素とは

（deleted）は削除されたテキストを表す HTML 要素です。HTML4 の頃から存在し、デフォルトのスタイルは取り消し線（text-decoration: line-through）。意味的には「以前は載っていたが取り消された情報」を表現します。

基本構文

<p>定価 <del>1980円</del> 特価 980円</p>

<p>会議は <del>3月10日</del> <ins>3月15日</ins> に変更されました。</p>

属性

属性意味例
cite削除理由を説明する URLcite="/changelog"
datetime削除日時（ISO 8601）datetime="2026-03-15T10:00"
 
<p>料金は <del cite="/news/price-update" datetime="2026-01-15">月額500円</del>
   <ins datetime="2026-01-15">月額780円</ins> に改定されました。</p>

と と の違い

要素意味用途現状
<del>編集により削除されたテキスト編集履歴・訂正HTML5 推奨
<s>もはや正確でない / 関連性のないテキスト無効化された情報（在庫切れ等）HTML5 推奨
<strike>取り消し線（装飾のみ）装飾HTML5 で廃止

意味の使い分け:

  • 編集で消えた（前の版にはあった）→ <del>
  • もう正しくない（在庫切れ、終了したキャンペーン）→ <s>
  • 単なる装飾 → CSS の text-decoration: line-through

ブロックレベルとインラインの両方で使える

<del> はトランスペアレントコンテンツモデルのため、ブロック要素もインライン要素も子に持てます。段落全体を削除済みにすることも可能です。

<!-- インライン使用 -->
<p>料金は <del>500円</del> 780円</p>

<!-- ブロック使用 -->
<del>
  <p>この機能は廃止されました。</p>
  <p>代わりに新機能をお使いください。</p>
</del>

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 とアクセシビリティ

スクリーンリーダーは多くの場合 <del> を「削除：〜」のように読み上げます。一方、CSS の text-decoration: line-through だけだと読み上げは変化しません。意味的に削除を伝えたい場合は必ず <del> を使うべきです。

SEO 観点では、Google は <del> 内のテキストもインデックス対象とします。ただし更新後の情報を <ins> 等で明示しておくと、検索ユーザーが現状を理解しやすくなります。

典型ユースケース

  • 価格訂正: <del>1980円</del> 980円
  • 記事の更新履歴: 「以前は誤って〜と記載していました」
  • ToDo リスト: 完了タスクに <del>
  • 差分表示: 旧版を <del>、新版を <ins>

FAQ

Q: 取り消し線だけ表示したい場合は？
A: 編集による削除でないなら <s> を使うか、装飾なら span style="text-decoration:line-through"。<del> は意味的に「削除」を表すので、安易な装飾用途には避けましょう。

Q: datetime 属性のフォーマットは？
A: ISO 8601 形式。日付のみなら 2026-03-15、時刻まで含めるなら 2026-03-15T10:30:00+09:00。タイムゾーンを明示するなら末尾に +09:00 または Z（UTC）。

Q: と をネストできる？
A: 可能。例えば「以前は削除されていた追加文」を表すような複雑な編集履歴も表現できます。ただし、可読性の観点から多重ネストは避けるべきです。

Q: GitHub の差分表示のように使える？
A: 段落単位の差分は <del> と <ins> で表現できます。コードの行単位差分には <pre> 内で個別に色付けする方法が一般的です。

HTML5 仕様の参考

HTML5 で <del> と <ins> はカテゴリとしては「フローコンテンツ」と「フレージングコンテンツ」の両方になる珍しい要素です。これによりブロック要素を子に含めても OK、段落の中に置いても OK という柔軟性を実現しています。仕様上は HTML4 から存在しますが、HTML5 で cite と datetime 属性が標準として整理されました。

関連

  • ins 要素 — 追加されたテキスト
  • s 要素 — もはや正確でないテキスト
  • strike 要素 — HTML5 で廃止された取り消し線要素
  • blockquote 要素 — 引用ブロック（cite 属性が同様）
  • mark 要素 — ハイライト表示