ins要素は挿入テキストを表し、そのコンテンツがドキュメントに追加されたことを表すことができます。
もし、あるページに、後からフレーズが追加されたことをマークアップしたい場合、次のようにマークアップします。
ins要素のマークアップ例
<p>HTML5では、当初、datagrid要素が規定されていましたが、削除されました。</p>
<ins><p>後にdialog要素も仕様から削除されました。</p></ins>
ブラウザでは、通常、次のように、アンダーラインを使ってレンダリングされます。
ins要素のマークアップ例のサンプル
HTML5では、当初、datagrid要素が規定されていましたが、削除されました。
後にdialog要素も仕様から削除されました。
ins要素で文章などが追加された場合、追加された理由を説明したページがあれば、cite属性を使って、そのページの URL を指定することができます。
cite属性のマークアップ例
<p>HTML5では、当初、datagrid要素が規定されていましたが、削除されました。</p>
<ins cite="http://blog.whatwg.org/this-week-in-html5-episode-35"><p>後にdialog要素も仕様から削除されました。</p></ins>
cite属性のマークアップ例のサンプル
HTML5では、当初、datagrid要素が規定されていましたが、削除されました。
後にdialog要素も仕様から削除されました。
ins要素で文章などが追加された場合、追加された日時を datetime属性を使って指定することができます。
datetime属性のマークアップ例
<p>HTML5では、当初、datagrid要素が規定されていましたが、削除されました。</p>
<ins datetime="2009-09-16T12:40:00+09:00" cite="http://blog.whatwg.org/this-week-in-html5-episode-35"><p>後にdialog要素も仕様から削除されました。</p></ins>
datetime属性のマークアップ例のサンプル
HTML5では、当初、datagrid要素が規定されていましたが、削除されました。
後にdialog要素も仕様から削除されました。
datetime属性で表すことができる日時のフォーマットは、日本時間であれば次のようになります。
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>
差し替え訂正のマークアップ例のサンプル
HTML5では、当初、dategriddatagrid要素が規定されていましたが、削除されました。
これはスペルミスを訂正するために、当初マークアップされていた "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 {
text-decoration: underline;
}