1. ホーム
  2. HTML

【HTML】del・ins・s の使い方｜変更・追加・取り消しを意味づけしてマークアップする

Share

文章を「あとから書き換えた」「もう正しくない」と示したいとき、ただ打ち消し線を引くだけでは、それが削除なのか・修正なのか・無効になった情報なのかが機械には伝わりません。HTML には、こうした変更や取り消しを意味づけしてマークアップするための要素として <del>・<ins>・<s> が用意されています。この記事では、3つの要素の意味の違い、変更理由を示す cite 属性と日時を示す datetime 属性、既定の見た目、そしてアクセシビリティ上の注意点までを、実際の表示を交えて解説します。見た目だけ打ち消し線にしたいときにこれらを使うべきでない理由にも触れます。

del・ins・s は何を表す要素か

この3要素はどれも「もとのテキストに手を加えた」ことを示しますが、表す意味はそれぞれ異なります。まず大きく分けて、<del> と <ins> は文書の編集差分を表す一対の要素で、<s> はもはや正確でない・関連しなくなった内容を表す要素です。同じ「打ち消し線」に見えても、使い分けは内容の意味によって決まります。

<del>（deleted の略）は、文書から削除された内容を表します。<ins>（inserted の略）は、その逆で文書に追加された内容を表します。たとえば校正で文章を直したとき、消した部分を <del>、新しく入れた部分を <ins> で囲むと、「ここを消してこう書き換えた」という編集の履歴をマークアップとして残せます。

一方 <s>（strikethrough の略）は、すでに正確でなくなった、あるいは関連しなくなった内容を表します。文書から削除したわけではなく、情報としては残しておくけれど「これはもう有効ではありません」と示したい場面で使います。代表例がセール前の価格です。「5,000円 3,980円」のように、もとの価格は消さずに残しつつ「この値段はもう無効」と示すのが <s> の役割です。

3つの意味を整理すると次のようになります。「編集による差分」なのか「情報が無効になった」のかが使い分けの分かれ目です。

要素表す意味使う場面の例
<del>文書から削除された内容（編集差分）校正で消した文、変更前の項目
<ins>文書に追加された内容（編集差分）校正で書き加えた文、変更後の項目
<s>もはや正確でない・関連しない内容セール前の価格、売り切れた商品、達成済みの予定

表示の違いを確かめる

まずは3要素が実際にどう表示されるかを見てみましょう。ブラウザの既定スタイルでは、<del> と <s> は打ち消し線、<ins> は下線で表示されます。下のデモは、無効になった価格を <s> で示す例と、会場の変更を <del>・<ins> で示す例です。CSS のタブで色を変えているので、どれがどの要素かが分かりやすくなっています。

<p class="line">
  本日のセール価格：<s>5,000円</s> 3,980円
</p>

<p class="line">
  会場：<del cite="https://example.com/notice" datetime="2026-06-20">東京会場</del>
  <ins cite="https://example.com/notice" datetime="2026-06-20">大阪会場</ins>
</p>

body {
  font-family: sans-serif;
  padding: 16px;
  font-size: 18px;
}

.line {
  line-height: 2;
  margin-bottom: 16px;
}

/* del と s は既定で打ち消し線、ins は既定で下線。
   ここでは違いが分かるよう色も添えています。 */
del {
  color: #d32f2f;
}

ins {
  color: #2e7d32;
  text-decoration: underline;
}

s {
  color: #888;
}
Preview

見た目は <del> と <s> でほぼ同じですが、上で説明したとおり意味は別物です。価格のように「情報として残しつつ無効と示したい」ものは <s>、文書を編集して「消した／足した」差分を示すものは <del>・<ins> を選びます。

del と ins で編集差分をマークアップする

<del> と <ins> は、変更前と変更後をセットで示すときによく一緒に使います。下の例は、ある項目を「変更前の値」から「変更後の値」へ書き換えたことを表しています。

index.html
<p>
  開始時刻：<del>10:00</del> <ins>13:00</ins>
</p>

このように、削除した内容を <del>、新しく加えた内容を <ins> で囲むと、「10:00 を消して 13:00 に変更した」という編集の意味がマークアップに残ります。<del> と <ins> はどちらも、囲む範囲によってインライン（文中の一部）にもブロック（段落やリストごと）にもなる柔軟な要素です。1文字だけ囲んでも、いくつかの段落をまるごと囲んでも構いません。

たとえばリストの項目をまるごと差し替えるなら、<li> を <del> や <ins> で囲んで、削除された行と追加された行を並べることもできます。変更履歴を見せたい議事録や仕様書、利用規約の改定箇所などで役立ちます。

cite と datetime で変更の理由と日時を示す

<del> と <ins> には、変更に関する情報を補足するための2つの属性があります。cite 属性と datetime 属性です。これらは <s> にはなく、編集差分を表す <del>・<ins> 専用の属性です。

cite 属性には、その変更の理由を説明している文書の URL を指定します。たとえば変更を告知したお知らせページや、課題管理システムのチケットの URL を入れておくと、「なぜこの変更が行われたのか」をたどれるようになります。

datetime 属性には、変更が行われた日時を機械可読な形式で指定します。日付だけなら 2026-06-20、時刻まで含めるなら 2026-06-20T13:00:00+09:00 のように、<time> 要素と同じ ISO 8601 形式で書きます。次の例では、両方の属性を付けて変更を記録しています。

index.html
<p>
  料金：
  <del cite="https://example.com/news/123" datetime="2026-06-20">1,000円</del>
  <ins cite="https://example.com/news/123" datetime="2026-06-20">1,200円</ins>
</p>

注意したいのは、cite も datetime も画面には表示されない点です。これらは検索エンジンや支援技術、あるいはページを処理するプログラムが読み取るためのメタ情報であり、ブラウザがそのまま見た目に反映するわけではありません。理由や日時を読者に見せたい場合は、別途テキストやツールチップで補う必要があります。それでも属性として残しておくことで、変更の文脈を構造化された形で保持できます。

既定の見た目と「意味づけ」の関係

ブラウザの既定スタイルでは、<del> と <s> に打ち消し線、<ins> に下線が引かれます。ここで大切なのは、これらの要素は「打ち消し線を引くための要素」ではないということです。打ち消し線はあくまで既定の表示であって、要素の本質は「削除・追加・無効」という意味にあります。

意味づけがされていると、見た目以上の価値が生まれます。検索エンジンは「ここは削除された／追加された内容だ」と解釈でき、変更履歴を見せるツールはその差分を機械的に抽出できます。逆に、ただ <span> に打ち消し線の CSS を当てただけのテキストは、人間の目には同じに見えても、機械にとっては「ただの文字」でしかありません。<del>・<ins>・<s> を正しく選ぶことは、文書の意味を残すことにつながります。

スクリーンリーダーとアクセシビリティの注意

これらの要素を使ううえで見落としがちなのが、多くのスクリーンリーダーは打ち消し線や下線を読み上げないという点です。視覚的には打ち消し線で「これは消された」と分かっても、音声で読み上げる環境では、<del> の中身と通常のテキストが区別なく読まれてしまうことがあります。つまり「5,000円」が、目で見れば無効と分かるのに、耳で聞くと「5,000円」とそのまま伝わってしまうおそれがあるのです。

削除や無効であることが内容の理解に欠かせない場合は、見た目だけに頼らない工夫が必要です。たとえば <del> の前後に視覚的に隠したテキスト（「削除：」「ここまで削除」など）を ::before／::after の content で補ったり、文中で「変更前は〇〇でした」と言葉でも説明したりすると、音声環境でも変更が伝わります。重要なのは、要素の意味が確実に伝わることを、視覚と非視覚の両方で担保することです。

見た目だけが目的なら CSS を使う

ここまで見てきたとおり、<del>・<ins>・<s> は「意味」を表す要素です。そのため、意味とは関係なく、単に打ち消し線や下線という見た目がほしいだけのときにこれらを使うのは適切ではありません。たとえば装飾としてテキストに線を引きたいだけの場面で <s> を使うと、機械には「この情報は無効だ」と誤って伝わってしまいます。

見た目だけが目的なら、CSS の text-decoration プロパティを使いましょう。打ち消し線は text-decoration: line-through、下線は text-decoration: underline で表現できます。意味を持たない通常の要素（<span> など）にこれらのスタイルを当てれば、見た目は同じでも余計な意味づけは発生しません。

style.css
/* 意味づけは不要で、見た目だけ打ち消し線にしたいとき */
.strike {
  text-decoration: line-through;
}

「削除・追加・無効という意味があるなら <del>・<ins>・<s>、ただの装飾なら CSS」と覚えておくと、要素の選び方で迷わなくなります。

まとめ

<del>・<ins>・<s> は、変更や取り消しを見た目ではなく意味でマークアップするための要素です。要点を振り返ります。

  • <del>＝削除された内容、<ins>＝追加された内容で、編集差分を一対で表す
  • <s>＝もはや正確でない・関連しない内容（セール前価格など、削除ではなく無効）
  • <del>・<ins> には変更理由の URL を示す cite と変更日時を示す datetime が使える（画面には表示されない）
  • 既定では del・s が打ち消し線、ins が下線。ただし要素の本質は見た目ではなく意味
  • スクリーンリーダーは線を読み上げないことがあるため、必要なら言葉でも変更を補う
  • 意味と関係なく見た目だけほしいときは CSS の text-decoration を使う

「これは編集差分なのか、無効になった情報なのか、それとも単なる装飾なのか」を一度立ち止まって考えると、3要素と CSS を正しく選び分けられるようになります。

参考ページ