HTML <ins>

<ins> と </ins> に囲まれた範囲が追加部分であることを示します。

HTML

HTMLの場合、タグ名及び属性名は大文字と小文字を区別しない。

<INS>
  <!-- transparent -->
</INS>

XHTML

XHTMLの場合、タグ名及び属性名は小文字で記述する。

<ins>
  <!-- transparent -->
</ins>

使用例

ins要素の使用例を次に示す。

Extensible <ins>HyperText</ins> Markup Language

Extensible HyperText Markup Language

挿入した部分には、ウェブ・ブラウザによって何らかの視覚効果を与えられる。たとえば、Google Chromeでは下線が引かれる。ただし、この視覚効果についてはHTMLの仕様で決められているわけではなく、ウェブ・ブラウザによって異なる。

属性

次の属性を指定できます。属性は全て省略可能です。

cite
変更した理由に関する情報のURI
<ins cite="https://segakuin.com/html/ins.html">
  example
</ins>
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
<ins class="insert">
  example
</ins>
data-*
カスタムデータ属性を指定する。カスタムデータ属性とは、JavaScript から要素独自の属性を読み取るための仕組みである。
datetime
変更した日付と時刻
<ins datetime="2021-10-01 00:00Z">
  example
</ins>
dir
テキストを記述する方向を指定する。
dir属性
ltr 左から右へ記述する (日本語や英語など)
rtl 右から左へ記述する (アラビア語など)
auto ユーザーエージェントに決定させる
id
HTML文書内で一意な識別子を指定する。
lang
この文書が何語で記述されているかを指定する。
lang属性
説明
en 英語
ja 日本語
<ins lang="en">
  example
</ins>
ondblclick
要素がダブルクリックされたときに実行するJavaScriptを指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。
<ins style="color: red;">
  example
</ins>

カテゴリ

ins要素は次示すカテゴリに属する。

コンテンツ・モデル

ins要素のコンテンツ・モデルは透過的である。透過的な要素はコンテンツ・モデルを変更しないので、親要素で許可されるコンテンツを含むことができる。

たとえば、p 要素のコンテンツ・モデルはフレージング・コンテンツなので、ins 要素のコンテンツ・モデルもフレージング・コンテンツとなる。

<p>
  <!-- phrasing content -->
  <ins>
    <!-- phrasing content -->
  </ins>
</p>

aside 要素のコンテンツ・モデルはフロー・コンテンツなので、ins 要素のコンテンツ・モデルもフロー・コンテンツとなる。

<aside>
  <!-- flow content -->
  <ins>
    <!-- flow content -->
  </ins>
</aside>

ins要素は親要素にコンテンツを追加するので、親要素に含められるコンテンツを追加できるのは当然であるし、親要素に含められないコンテンツを追加できないのも自明である。

タグの省略

ins要素の開始タグおよび終了タグは省略できない。

JavaScript

JavaScriptからはHTMLModElementインタフェースを通じてins要素へアクセスできる。

interface HTMLModElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString cite;
  [CEReactions] attribute DOMString dateTime;
};

HTMLModElementインタフェースは次に示すプロパティを持つ。

cite
ins要素のcite属性
cite = document.getElementById("example").cite;
dateTime
ins要素のdateTime属性
dateTime = document.getElementById("example").dateTime;

参考文献

Web Hypertext Application Technology Working Group (2021) "Edits" HTML Living Standard