HTML del要素の使い方｜取り消し線・ins要素との違い・cite/datetime

▶

編集

この記事の要点

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

del 要素とは

<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`	削除理由を説明する URL	`cite="/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> と <s> と <strike> の違い

要素	意味	用途	現状
`<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: <del> と <ins> をネストできる？
A: 可能。例えば「以前は削除されていた追加文」を表すような複雑な編集履歴も表現できます。ただし、可読性の観点から多重ネストは避けるべきです。

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

HTML5 仕様の参考

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

ページ一覧

その他