定義と使用方

<ins>タグは
文書に追加されたテキスト範囲や挿入された（inserted）コンテンツを示すために使用されます。

使用例

追加されたテキスト範囲

HTML 
<p>私が一番好きな色は<del>赤です。</del> <ins>青です。</ins></p>
ブラウザで実際に表示された様子

<ins>タグは主に変更されたテキストを強調し、ユーザーに変更内容を視覚的に示すために使用されます。この場合、文書やソースコードの変更点の追跡などに活用できます。
ほとんどのブラウザではテキストに下線が表示されます。

<del>タグはこれとは反対の用途で、HTML文書内で削除されたテキスト範囲を示すために使用されます。

挿入されたコンテンツ

主に第三者（third party）が提供する広告のタグとしてよく使用されます。広告はウェブページに挿入されたコンテンツの一種だからです。

以下は、Googleの広告システムであるGoogle AdSenseで使用される<ins>タグの例です。

HTML 
<ins class="adsbygoogle">
    <!-- 広告素材 -->
</ins>

属性

<ins>タグはすべてのグローバル属性を使用できます。

cite属性

<ins>タグのcite属性は追加された内容に関する説明を提供するリソースのURLです。

<ins>タグにcite属性が必ずしも必要なわけではありません。しかし、cite属性は、変更内容の元情報や説明を参照できるリンクを提供することで、文書の利用者に追加情報を提供するのに役立ちます。

例えば、変更内容に関する詳細な説明や背景情報を含むウェブページ、会議記録、問題解決システムのチケット、または関連文書へのリンクをcite属性で指定できます。

HTML 
<p>
    最新のアップデートに関する説明です。
    <ins cite="https://example.com/changelog">
        最新のアップデート内容.....
    </ins>
</p>

上の例では、cite属性が、元のリソースである「最新のアップデート内容」ページのURLを提供しています。

cite属性は、ユーザーがウェブページを閲覧する際にはその値が表示されません。しかし、ウェブページの著作者やウェブ開発者、検索エンジンなどはこの情報を活用できます。

datetime 属性

<ins>タグのdatetime属性は追加された内容の日時を示します。

<ins>タグにdatetime属性が必ずしも必要なわけではありません。しかし、この属性を使用すると、該当する変更内容が発生した正確な日時を明示的に示すことができます。これは文書の更新履歴を管理したり、時間に基づく情報を伝えたりするのに役立ちます。

datetime属性の有効な値

datetime属性は、HTMLで使用できる有効な形式の日付と時刻の値である必要があります。

以下はdatetime属性を使用した例です。

HTML 
<p>
    最新のアップデートに関する説明です。
    <ins cite="https://example.com/changelog" datetime="2025-09">
        最新のアップデート内容.....
    </ins>
</p>

注意点

<ins>タグは、段落の区切りを明確にする必要があります。あいまいに段落の境界を越えて使用してはいけません。次のコード例を見てみましょう。

HTML 
<!-- 最初の例：段落をまたぐ<ins>タグの使用 -->
<aside>
    <!-- 注意：以下のように使用してはいけません -->
    <ins>
        <!-- あいまいに段落の境界を越えて使用しています -->
        <p>私は果物が好きです。</p> <!-- 第1段落の開始 -->
        りんごは<em>おいしい</em>です。 <!-- 第1段落の終了：段落の区切りが明確ではありません -->
    </ins>
    <ins>
        梨もおいしいです。 <!-- 第2段落の開始 -->
    </ins> <!-- 第2段落の終了 -->
</aside>

<!-- 2番目の例：正しい構造で<ins>タグを使用 -->
<aside>
    <ins>
        <p>私は果物が好きです。</p> <!-- 第1段落の開始 -->
    </ins> <!-- 第1段落の終了 -->
    <ins>
        りんごは<em>おいしい</em>です。 <!-- 第2段落の開始 -->
    </ins> <!-- 第2段落の終了 -->
    <ins>
        梨もおいしいです。 <!-- 第3段落の開始 -->
    </ins> <!-- 第3段落の終了 -->
</aside>

コード補足説明
<aside>タグは、ページ内の主要コンテンツに直接関連していないが、間接的に関連する内容で構成された別の部分（aside、別途の部分）を示します。

  1. 最初の例では、<ins>タグが2つの段落をまたいでいます。これは暗黙の段落境界を越える不適切な使用例です。
  2. 2番目の例では、変更された各部分を別々の<ins>タグで区切り、それぞれを個別の段落として表現しています。これにより、より明確な構造が提供され、変更内容と段落の境界を明確に示すことができます。

したがって、2番目の例のように<ins>タグを使用する際は、変更内容と段落構造を明確に維持することが重要です。こうすることで、文書の構造が明確になり、ユーザーが変更内容を理解しやすくなります。

ブラウザ互換性

insタグのブラウザ互換性
タグ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<ins> 1 12 1 4

仕様書

insタグの仕様書
仕様書
<ins> HTML Standard
#the-ins-element

参考資料

関連項目