◀ 6.

HTML ins / del 要素（挿入・削除テキスト）完全ガイド

▶
編集
この記事の要点
  • : 文書に挿入されたテキストを示す（ブラウザ既定で下線）
  • : 文書から削除されたテキスト（既定で取り消し線）、ins と対の関係
  • cite 属性: 変更理由を説明する URL（仕様書・PR・チケット）を指定
  • datetime 属性: 変更日時を ISO 8601 形式 (2026-06-11T10:30:00+09:00) で
  • 差分表示・Wiki・利用規約の改訂履歴・価格訂正の表示などに使う。（強調）とは別物

ins 要素とは

は Inserted Text（挿入されたテキスト）を意味する HTML 要素で、文書のある時点で追加された部分を示します。対になる （Deleted Text）と組合せて、変更履歴・差分表示・改訂版を表現するのが本来の用途です。


  価格は
  1,000円
  1,200円
  に改定されました。





  サポート対象は
  IE11 まで
  Edge 以降
  です。

属性

属性意味例
cite変更理由を説明するドキュメントの URLcite="https://example.com/changelog#v2"
datetime変更日時。ISO 8601 形式datetime="2026-06-11T10:30:00+09:00"
グローバル属性id / class / style / title / lang など—

datetime の書式

2026-06-11                       日付のみ
2026-06-11T10:30:00              日時（ローカル時刻、タイムゾーンなし）
2026-06-11T10:30:00Z             UTC（Z）
2026-06-11T10:30:00+09:00        日本時間
2026-06-11 10:30:00+09:00        スペース区切りでも可（HTML5）

表示の既定値

ブラウザ既定のスタイル:

要素既定スタイルCSS で表現するなら
下線text-decoration: underline;
取り消し線text-decoration: line-through;

カスタムスタイル例

/* Git diff 風 */
ins {
  background: #e6ffec;
  color: #1a7f37;
  text-decoration: none;
  padding: 0 2px;
}
ins::before { content: "+ "; }

del {
  background: #ffebe9;
  color: #cf222e;
  text-decoration: line-through;
  padding: 0 2px;
}
del::before { content: "- "; }

/* Wikipedia 風（控えめ） */
ins { background: #d4f4dd; text-decoration: none; }
del { color: #999; }

/* リンクと衝突しないよう下線を消す */
a ins, ins a { text-decoration: none; }

典型的なユースケース

  • 利用規約・プライバシーポリシーの改訂: 旧文を 、新文を で並記
  • 料金改定のお知らせ: 1,000円 → 1,200円 の差し替え
  • Wiki / 議事録の編集履歴: 「○○ を △△ に修正」
  • Git / PR の差分表示: 行単位の追加・削除を / でセマンティックに
  • 校正・赤入れの可視化: 編集者が手を入れた箇所を明示
  • テストの「期待 vs 実際」: 期待値を 、実際を で見せる

ブロックレベルでも使える

HTML5 では / はインラインでもブロックでも使える「透過要素」になりました。段落丸ごと挿入・削除も可:



  
新しい段落をここに追加。

  
    
    
  • 箇条書きも丸ごと挿入
    • 
  





  
この段落はもう不要になりました。

関連要素との違い

要素用途既定スタイル
挿入（編集履歴）下線
削除（編集履歴）取り消し線
装飾の下線（固有名等）下線
もう正確でない情報（在庫切れ等、編集履歴ではない）取り消し線
強調（検索ヒット箇所等）黄色マーカー
/ 重要性 / 強調太字 / イタリック

使い分けのポイント: 「履歴を残したい」なら ins/del、「単に取り消し線が欲しい」（在庫切れの値段等）は 、「強調」は や 。

アクセシビリティ

  • スクリーンリーダーは既定では / を読み上げない（視覚的な装飾とみなす）
  • 履歴の意味を伝えたい場合は 新しい料金 の前に「変更後:」とテキストを添える、または ::before で表示
  • 色覚多様性対応: 緑（追加）/ 赤（削除）の色だけで区別せず、記号（+/-）も併用
/* スクリーンリーダーにも編集状態を伝える */
ins::before {
  content: " 挿入: ";
  position: absolute;
  left: -9999px;   /* 視覚的には隠す */
}
ins::after { content: " "; }
del::before {
  content: " 削除: ";
  position: absolute;
  left: -9999px;
}

JavaScript で動的に差分を表示

// jsdiff ライブラリで diff を ins/del で表示
import * as Diff from 'diff';

const oldText = 'これは古いテキストです。';
const newText = 'これは新しいテキストです。';

const diff = Diff.diffChars(oldText, newText);

const html = diff.map(part => {
  if (part.added) return `${part.value}`;
  if (part.removed) return `${part.value}`;
  return part.value;
}).join('');

document.getElementById('output').innerHTML = html;

FAQ

Q: と はどちらを使うべき？
A: 「編集で挿入された」なら 、「単に下線を引きたい」なら 。 はリンクと混同されやすいので CSS で border-bottom を使うことが多い。

Q: cite 属性はどこに表示される？
A: ブラウザは既定で表示しません。ツールチップ表示するなら title 属性を併用、JS で取得するなら el.cite。

Q: と はどちらでも取り消し線では？
A: 見た目は同じですが意味が違います。 は「編集で削除された」、 は「もう正確でない情報」。在庫切れ商品の値段には が適切です。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. HTML em 要素（強調）の使い方と strong との違い
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素で整形済みテキストを表示する
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素で上付き文字を表示する
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-06-10 17:35:42 guest 240

人気ページ

最近更新/作成されたページ