<ins>：文書の中で新たに追加された部分を表す要素・HTMLタグの解説

<ins>タグの解説

<ins>は、文書の中で新たに追加された範囲を表します。公開済みのドキュメントが編集されて新しいバージョンとして書き加えられた箇所を明示する際に用います。指定された範囲は既定値でアンダーラインが引かれます。「ins」とは英語で差し込みを表す「insert」の略語です。

この要素に追加された内容に関する具体的な日時や参照先のURLを、属性を使って付与することもできます。文章から訂正あるいは削除された範囲を表す場合は、<del>を使用して下さい。

<ins>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果としてアンダーラインが引かれます。これはユーザーエージェントの既定スタイルによるものです。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<ins>要素に指定できる属性

cite

変更が加えられた情報に関する参照先のURLを指定できます。

datetime

変更が加えられた日時をタイムスタンプ形式で表します。例：YYYY-MM-DDThh:mm:ssTZD

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<ins>要素の使い方とサンプルコード

この要素の最も基本的な書き方は以下の通りです。公開されたドキュメントに編集が加わり、新しく追加された部分を表します。

<ins>update</ins>

基本的には、同一の段落の中で追記された部分を表すために使用します。

<p>Text <ins>update</ins> text.</p>

追加された部分を明示する際に、その内容を包合する要素の配置場所に気をつけましょう。以下の場合、前者は空の段落が先にあり、内容が後から追加されたことになってしまいます。後者のように、段落が後から追加されたことが分かるように記述すべきです。

// 誤った書き方
<p><ins>Update</ins></p>

// 正しい書き方
<ins><p>Update</p></ins>

また、この要素は暗黙の段落を横断するような形で配置してはいけません。一つの追加項目は一つの<ins>要素として扱い、分割できるものは新たな<ins>要素として扱うべきです。

// 誤った書き方
<ins>
	<p>Update: Some text.</p>
	Another text.
</ins>

// 正しい書き方
<ins>
	<p>Update: Some text.</p>
</ins>
<ins>
	Another text.
</ins>

cite属性の指定方法と役割り

追加した内容に関連する情報がある場合は、cite属性を使って参照先のURLを提示できます。ただし、URLを指定しても実際にハイパーリンクが生成されるわけではありません。

<ins cite="info.html">Update</ins>

datetime属性の指定方法と役割り

追加された内容にdatetime属性を使ってタイムスタンプを残すことができます。指定できる値は、HTMLで使用できるISO 8601規格に準じたフォーマットです。この属性に指定した内容は画面には表示されません。機械的な解釈が必要な場合に活用して下さい。

<ins datetime="2045-10-10T13:00">Update</ins>

以上のことを踏まえて、この要素の具体的な使用例を見ていきましょう。編集によって追加された項目の境界線が明確であれば、情報の取り扱いもしやすくなります。

<h2>更新情報</h2>
<ins cite="#info_1003.html" datetime="2045-10-12T18:00">
	<p>不具合を確認したため修正版のパッチを配信しました。</p>
</ins>
<ins cite="#info_1002.html" datetime="2045-10-11T16:00">
	<p>本日アップデートを行いました。最新のデータを反映するために再起動を行って下さい。</p>
</ins>
<ins cite="#info_1001.html" datetime="2045-10-10T13:00">
	<p>明日の12:00よりアプリ更新のためメンテナンスを行います。</p>
</ins>

<del>要素と併用する

<ins>は編集（エディット）の意図を表す要素であり、同じく編集を表す要素として<del>と併用できます。それぞれのスタイルシートを調整して、削除された範囲と追加挿入された範囲が分かりやすく表現してみましょう。

p del {
	text-decoration: line-through rgb(0 0 0 / 0.5);
	background-color: rgb(255 0 0 / 0.3);
}
p ins {
	text-decoration: underline rgb(0 128 0 / 1);
	background-color: rgb(0 255 0 / 0.3);
}