SYNCER

SYNCER

<ins要素> - 追加された内容

公開日:

ins要素は、後から追加されたコンテンツであることを表す要素です。追記や修正が発生した時に、該当部分をマークアップするのに適しています。

概要

名前
ins (Insert)
カテゴリー
Flow content
Phrasing content
Palpable content
配置できる場所
Phrasing contentが期待される場所。
コンテンツモデル
Transparent。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLModElement
デフォルトのスタイル
ins {
	text-decoration: underline;
}
仕様書
https://html.spec.whatwg.org/multipage/semantics.html#the-ins-element

属性

cite

追加の理由が説明されているコンテンツのURL。

datetime

追加した日付、または日時を機械が解釈できる形式で指定する。下記は指定例です。

日付
2017-01-01
日時
2017-01-01 01:30:00

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

ins要素は、ドキュメントに後から追加したコンテンツをマークアップするための要素です。典型的な例は追記です。

HTML

<!-- 意図を追記 -->
<p>私はミカンが嫌いだ。<ins>(これは愛を込めて、嫌いと言った)</ins></p>

追加した時間の情報があれば、datetime属性で指定しましょう。表示に影響はありませんが、ユーザーエージェントにより多くの情報を伝えられます。

HTML

<!-- 2017年5月25日に追記したことを表す -->
<p>私はミカンが嫌いだ。<ins datetime="2017-05-25">(これは愛を込めて、嫌いと言った)</ins></p>

段落を追加する時は、段落ごと囲みます。

HTML

<p>私はミカンが嫌いだ。</p>
<ins>
	<p>これは愛を込めて、嫌いと言っている。</p>
</ins>
<p>そもそも…</p>

内容を訂正する時は、del要素と併せて使用しましょう。

HTML

<ins>
	<p>表記していた価格に誤りがあったため、訂正します。</p>
</ins>

<p>ミカン: <ins>150円</ins><del>1,500円</del></p>

段落の境界を超えてマークアップするべきではありません。

HTML

<!-- 間違った例 -->
<ins>
	<p>言いたいことがあるので追記しておく。</p>
	<p>私がミカンを嫌いと言ったのは、愛を込めて、である。</p>
	本当はミカンが好きなのだ。
</ins>

<!-- 正しい例 -->
<ins>
	<p>言いたいことがあるので追記しておく。</p>
</ins>
<ins>
	<p>私がミカンを嫌いと言ったのは、愛を込めて、である。</p>
</ins>
<ins>
	本当はミカンが好きなのだ。
</ins>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】<ins要素> - 追加された内容</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/ins/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>ins要素は、後から追加したコンテンツをマークアップする要素です。</p>

<ins>
	<p>表記していた価格に誤りがあったため、訂正します。</p>
</ins>

<p>ミカン: <ins>150円</ins><del>1,500円</del></p>

	</body>
</html>

デモを開く

デモ

</head><body>までを含めて下さい。

<body> <div id="___body">

</div> <script>...</script> </body> </html>

<style>

</style>

<script>

</script>