<ins>

追加された部分を表す

HTML3.0 ~ 利用可能

最終更新日: 2020.10.27

どんなタグ?
追加された部分を表す時には、
このinsタグを使う。

コードサンプル
<body>
<p>今年の修学旅行先は、<del>札幌</del><ins>沖縄</ins>です。</p>
</body>

<ins> タグは insert(インサート)(挿入)の略で、 <ins> ~ </ins>で挟まれた範囲が、後から追加された項目であることを表すタグです。

どのカテゴリに属しているの?
insタグは フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
梱包できるタグは?
ins タグは、トランスペアレントコンテンツです。 親要素のタグが梱包できるタグを梱包することができます。

ai追記や修正が発生した時に使用するのに適しています。
削除された項目を表すdel タグと合わせて使う場面が多いです。

どうやって使うの?
後から追加する項目を、
<ins> タグで挟む。

ins タグは、後から追加された項目を <ins></ins> で挟みます。cite 属性で、追加された項目について説明があるサイトURLを示したり、datetime 属性で、変更が行われた日時を示すことができます。

使い方
<ins datetime="2020-10-01">追加された項目</ins>
コードサンプル
<body>

<h1>持ち物リスト</h1>

<ul>
  <li>えんぴつ</li>
  <li>プリント</li>
  <li><ins datetime="2020-10-01″>消しゴム</ins></li>
</ul>

</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/ins/sample01/
どこでも使えるの?
insタグは フレージング・コンテンツ が配置できるところならどこでも使えます。
気をつけることは?
ins タグは使用する場所により、中に梱包できるタグが変わります。
また、ins タグは、複数の要素をまたいで使用することができません。例えば、複数の段落(pタグ)が追加されたとしても、各段落(pタグ)ごとにinsタグで囲む必要があります。

aiins タグはトランスペアレント(透明)な存在なので、使用する場所によって、梱包できるタグが変わるんだね。

使える属性は?
グローバル属性と、
cite 属性、datetime 属性が使えます。

<ins> タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。

cite (サイト) 属性

項目が追加された理由を示すページのURLを示します。

属性値
URL
http://~

datetime(デイトタイム) 属性

項目が追加された日時を指定します。

属性値
YYYY-MM-DDThh:mm:ssTZD
コンピュータによって取り扱い可能な日時を表す文字列で指定します。

aiちなみに、datetime属性で使用する日本のタイムゾーン(TZD)は”+09:00″です!

サンプルが見たい
<ins>タグを使ったサンプルを
紹介します。

<ins> タグを使ったサンプルを紹介します。

基本的な<ins>タグのサンプル

コードサンプル
<body>
<h1>メンテナンスのお知らせ</h1>
<p><del datetime="2020-09-01T08:54:36+09:00″>2020年10月1日 0:00~6:00の間に最大30分</del></p>
<p><ins cite="https://codehero.shibajuku.net/html/ins/" datetime="2020-09-15T08:54:36+09:00″>2020年10月2日 1:00~5:00の間に最大60分</ins></p>
</body>
ブラウザでの表示例
https://codehero.shibajuku.net/html/ins/sample02/

aicite属性やdatetime属性は、必須ではありません。また、ブラウザの画面に直接表示されません。

デフォルトスタイルは?
デフォルトでは、
下線が引かれて表示されます。

一般的なブラウザで <ins>要素を表示した場合、下線が引かれます。
具体的には、下記のCSSと同等のスタイルが適用されます。

ins要素のデフォルトスタイル

ins {
  text-decoration: underline;
}

aiテキストリンクと間違えられる可能性があるので、実際に使用する際は、下線のスタイルを打ち消して使うとよいかもしれません。

対応ブラウザは?
すべての主要ブラウザで使用できます。

<ins>タグは HTML3.0以降で利用可能で、主に以下のブラウザが対応しています。

Internet Explorar
Internet Explorar あり
Edge
Edge 12 ~
Google Chrome
Google Chrome あり
Firefox
Firefox 1 ~
Safari
Safari あり
Opera
Opera あり

aiモダンブラウザは問題ありません。

このリファレンスを書いた人

ai

ai

2020年8月から、Shibajukuに参加しています。 おえかきと、本と、おいしいものがすきです。

About サロンメンバーで作った
リファレンスサイト

Shibajuku

Webのスキルを
ワイワイ学んで、
ガンガン活用
するサロン。

このサイトはWebクリエーター養成所
「Shibajuku」のメンバーが作った、
初心者でもわかりやすいHTML + CSSのリファレンスサイトです。

このサイトについて