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

たとえば、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