どんなタグ？
追加された部分を表す時には、
このinsタグを使う。
<body>
<p>今年の修学旅行先は、<del>札幌</del><ins>沖縄</ins>です。</p>
</body>
<ins> タグは insert（挿入）の略で、
<ins> ~ </ins>で挟まれた範囲が、後から追加された項目であることを表すタグです。
- どのカテゴリに属しているの？
- insタグは フロー・コンテンツ, フレージング・コンテンツ というコンテンツ・カテゴリに属しているタグです。
- 梱包できるタグは？
- ins タグは、トランスペアレントコンテンツです。 親要素のタグが梱包できるタグを梱包することができます。
追記や修正が発生した時に使用するのに適しています。
削除された項目を表す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タグで囲む必要があります。
ins タグはトランスペアレント（透明）な存在なので、使用する場所によって、梱包できるタグが変わるんだね。
使える属性は？
グローバル属性と、
cite 属性、datetime 属性が使えます。
<ins> タグには、どの要素にでも使えるグローバル属性と、以下の固有属性が使えます。
cite 属性
項目が追加された理由を示すページのURLを示します。
- 属性値
-
URL- http://～
datetime 属性
項目が追加された日時を指定します。
- 属性値
-
YYYY-MM-DDThh:mm:ssTZD- コンピュータによって取り扱い可能な日時を表す文字列で指定します。
ちなみに、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/
cite属性やdatetime属性は、必須ではありません。また、ブラウザの画面に直接表示されません。
デフォルトスタイルは？
デフォルトでは、
下線が引かれて表示されます。
一般的なブラウザで <ins>要素を表示した場合、下線が引かれます。
具体的には、下記のCSSと同等のスタイルが適用されます。
ins {
text-decoration: underline;
}
テキストリンクと間違えられる可能性があるので、実際に使用する際は、下線のスタイルを打ち消して使うとよいかもしれません。
対応ブラウザは？
すべての主要ブラウザで使用できます。
<ins>タグは HTML3.0以降で利用可能で、主に以下のブラウザが対応しています。
- Internet Explorar
- Internet Explorar あり
- Edge
- Edge 12 ~
- Google Chrome
- Google Chrome あり
- Firefox
- Firefox 1 ~
- Safari
- Safari あり
- Opera
- Opera あり
モダンブラウザは問題ありません。
