HTML要素辞書 by Sentaro

<ins>

挿入されたテキスト（Inserted Text）要素。文書に加えられたテキストの範囲を示します。

info

概要

<ins> 要素は、文書のバージョン間で挿入（追加）されたテキストのブロックまたはインラインの範囲を表します。
ブラウザのデフォルトスタイルでは、通常、挿入されたテキストに**下線**が引かれます。

削除されたテキストを示す <del> 要素と組み合わせて、文書の改訂履歴を示す際によく使用されます。

play_circle

HTML (Source)

私の好きな色は <del>赤</del> です。 <ins datetime="2025-12-14">青</ins> に変更しました。 <ins> 新しい段落をここに挿入します。 </ins>

Preview (Result)

私の好きな色は赤です。青に変更しました。

新しい段落をここに挿入します。

list

属性名	説明
cite	変更に関する情報を含むリソースのURLを指定します。この変更が行われた理由や経緯を示すドキュメントへのリンクなどに使用します。
datetime	テキストが挿入された日時を示します。有効な日付または時刻の文字列（例: `2025-12-14`, `2025-12-14T14:00:00Z`）を指定します。

code

1. 変更日時を明記したインライン挿入

<p>
 価格は <del datetime="2025-12-01">1,000円</del> から
 <ins datetime="2025-12-14">1,200円</ins> に改定されました。
</p>

2. 変更理由へのリンクと日時をブロック要素で示す

<!-- ブロック要素としての利用例（pタグ全体を囲む） -->
<ins cite="/revision-log.html#v2" datetime="2025-12-14">
 <p>この段落全体が、バージョン2.0で新しく追加されました。</p>
</ins>

3. のネスト（非推奨）

<!-- 通常は推奨されません。変更範囲は明確にしましょう。 -->
<p>
 これは <ins>新しい<ins>非常に新しい</ins>情報</ins> です。
</p>

lightbulb

error

視覚的な装飾ではない
単にテキストに下線を引きたいだけであれば、CSSの text-decoration: underline; を使用すべきです。<ins> 要素は、**文書のセマンティクス（意味）**として「挿入されたテキスト」を示すために存在します。

accessibility_new

スクリーンリーダーへの影響
多くのスクリーンリーダーは、<ins> や <del> の内容を特別に読み上げません。重要な変更や法的文書などで、変更内容をアクセシブルに伝えたい場合は、視覚的な装飾だけでなく、**変更ログ**などの補足情報を提供することが重要です。