HTML

この記事では、文章の更新や修正で後から追加された部分を意味付けして示すins要素と、削除を表すdel要素との関係を説明します。

ins 要素

　ins要素は挿入テキストを表し、そのコンテンツがドキュメントに追加されたことを表すことができます。

　もし、あるページに、後からフレーズが追加されたことをマークアップしたい場合、次のようにマークアップします。

<p>HTML5では、当初、datagrid要素が規定されていましたが、削除されました。</p>

<ins><p>後にdialog要素も仕様から削除されました。</p></ins>

ブラウザでは、通常、次のように、アンダーラインを使ってレンダリングされます。

cite 属性

　ins要素で文章などが追加された場合、追加された理由を説明したページがあれば、cite属性を使って、そのページの URL を指定することができます。

<p>HTML5では、当初、datagrid要素が規定されていましたが、削除されました。</p>

<ins cite="https://blog.whatwg.org/this-week-in-html5-episode-35"><p>後にdialog要素も仕様から削除されました。</p></ins>

datetime 属性

　ins要素で文章などが追加された場合、追加された日時を datetime属性を使って指定することができます。

<p>HTML5では、当初、datagrid要素が規定されていましたが、削除されました。</p>

<ins datetime="2009-09-16T12:40:00+09:00" cite="https://blog.whatwg.org/this-week-in-html5-episode-35"><p>後にdialog要素も仕様から削除されました。</p></ins>

　datetime属性で表すことができる日時のフォーマットは、日本時間であれば次のようになります。

2009-09-16T12:40+09:00
2009-09-16T12:40:00+09:00
2009-09-16T12:40:00.001+09:00

　タイムゾーンは必須ですので注意してください。秒を省略すると、00秒と解釈されます。また、ピリオドを使ってミリ秒を指定することも可能です。

差し替え訂正

　ins要素と del要素を使えば、差し替え訂正を表すことができます。

<p>HTML5では、当初、<del>dategrid</del><ins>datagrid</ins>要素が規定されていましたが、削除されました。</p>

　これはスペルミスを訂正するために、当初マークアップされていた "dategrid" を del要素でマークアップし、訂正後の "datagrid" を ins要素でマークアップしています。

リストの訂正

リストを表す ul要素と ol要素のコンテンツ・モデルでは li要素以外の要素を認めていません。つまり、これらの要素の直下には li要素しか入れることができません。そのため、次のマークアップは正しくありません。

<p>企画会議の出席予定者は以下の通りです。</p>

<ul>

	<li>営業部　部長　山田兼士</li>

	<del><li>開発部　部長代理　佐藤克洋</li></del>

	<ins><li>開発部　部長　石原俊輔</li></ins>

	<li>企画部　課長　田中武司</li>

</ul>

　たとえ、リストの項目そのものが追加されたり削除されたとしても、そのような項目もリスト項目の 1つです。つまり、削除される項目も含めてリスト要素のコンテンツなのです。そのため、ul要素や ol要素のようなリスト要素の直下で ins要素や del要素を使うのは、リスト要素のセマンティクスに沿いません。

　リスト項目そのものを削除したり追加する場合は、ins要素や del要素を、li要素の中で使うようにしなければいけません。

<p>企画会議の出席予定者は以下の通りです。</p>

<ul>

	<li>営業部　部長　山田兼士</li>

	<li><del>開発部　部長代理　佐藤克洋</del></li>

	<li><ins>開発部　部長　石原俊輔</ins></li>

	<li>企画部　課長　田中武司</li>

</ul>

ins 要素の概要

Category 「カテゴリー」

Flow content 「フロー・コンテンツ」

フレージング・コンテンツのみを入れた場合：Phrasing content 「フレージング・コンテンツ：記述コンテンツ」

Content model 「コンテンツ･モデル」

トランスペアレント

利用可能な場所

フレージング・コンテンツが期待される場所

タグの省略

不可。開始と終了タグの両方が必要。

要素固有の属性

cite

テキストを追加した理由が説明されたページのURLを指定します。

datetime

テキストが追加された日時を指定します。

標準的なスタイル

ins {
	text-decoration: underline;
}