タイトル: ins要素
SEOタイトル: HTML ins / del 要素（挿入・削除テキスト）完全ガイド
| この記事の要点 |
|
ins 要素とは
<ins> は Inserted Text（挿入されたテキスト）を意味する HTML 要素で、文書のある時点で追加された部分を示します。対になる <del>（Deleted Text）と組合せて、変更履歴・差分表示・改訂版を表現するのが本来の用途です。
<p>
価格は
<del datetime="2026-06-01T00:00:00+09:00">1,000円</del>
<ins datetime="2026-06-11T00:00:00+09:00">1,200円</ins>
に改定されました。
</p>
<p>
サポート対象は
<del>IE11 まで</del>
<ins cite="https://example.com/policy">Edge 以降</ins>
です。
</p>属性
| 属性 | 意味 | 例 |
|---|---|---|
cite | 変更理由を説明するドキュメントの URL | cite="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 で表現するなら |
|---|---|---|
<ins> | 下線 | text-decoration: underline; |
<del> | 取り消し線 | 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; }典型的なユースケース
- 利用規約・プライバシーポリシーの改訂: 旧文を
<del>、新文を<ins>で並記 - 料金改定のお知らせ:
1,000円 → 1,200円の差し替え - Wiki / 議事録の編集履歴: 「
○○を△△に修正」 - Git / PR の差分表示: 行単位の追加・削除を
<ins>/<del>でセマンティックに - 校正・赤入れの可視化: 編集者が手を入れた箇所を明示
- テストの「期待 vs 実際」: 期待値を
<ins>、実際を<del>で見せる
ブロックレベルでも使える
HTML5 では <ins> / <del> はインラインでもブロックでも使える「透過要素」になりました。段落丸ごと挿入・削除も可:
<!-- 段落単位の挿入 -->
<ins datetime="2026-06-11">
<p>新しい段落をここに追加。</p>
<ul>
<li>箇条書きも丸ごと挿入</li>
</ul>
</ins>
<!-- 段落単位の削除 -->
<del datetime="2026-06-01">
<p>この段落はもう不要になりました。</p>
</del>関連要素との違い
| 要素 | 用途 | 既定スタイル |
|---|---|---|
<ins> | 挿入（編集履歴） | 下線 |
<del> | 削除（編集履歴） | 取り消し線 |
<u> | 装飾の下線（固有名等） | 下線 |
<s> | もう正確でない情報（在庫切れ等、編集履歴ではない） | 取り消し線 |
<mark> | 強調（検索ヒット箇所等） | 黄色マーカー |
<strong> / <em> | 重要性 / 強調 | 太字 / イタリック |
使い分けのポイント: 「履歴を残したい」なら ins/del、「単に取り消し線が欲しい」（在庫切れの値段等）は <s>、「強調」は <mark> や <strong>。
アクセシビリティ
- スクリーンリーダーは既定では
<ins>/<del>を読み上げない（視覚的な装飾とみなす） - 履歴の意味を伝えたい場合は
<ins>新しい料金の前に「変更後:」とテキストを添える、または::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 `<ins>${part.value}</ins>`;
if (part.removed) return `<del>${part.value}</del>`;
return part.value;
}).join('');
document.getElementById('output').innerHTML = html;FAQ
Q: <ins> と <u> はどちらを使うべき？
A: 「編集で挿入された」なら <ins>、「単に下線を引きたい」なら <u>。<u> はリンクと混同されやすいので CSS で border-bottom を使うことが多い。
Q: cite 属性はどこに表示される？
A: ブラウザは既定で表示しません。ツールチップ表示するなら title 属性を併用、JS で取得するなら el.cite。
Q: <del> と <s> はどちらでも取り消し線では？
A: 見た目は同じですが意味が違います。<del> は「編集で削除された」、<s> は「もう正確でない情報」。在庫切れ商品の値段には <s> が適切です。