＜ins要素＞ - 追加された内容

公開日: 2017/02/09

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年8月23日に追記したことを表す -->
<p>私はミカンが嫌いだ。<ins datetime="2017-08-23">(これは愛を込めて、嫌いと言った)</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>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/628/"> <meta charset="utf-8"> <title>【デモ】＜ins要素＞ - 追加された内容</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/ins/"> </head> <body>

<p>ins要素は、後から追加したコンテンツをマークアップする要素です。</p> <ins> <p>表記していた価格に誤りがあったため、訂正します。</p> </ins> <p>ミカン: <ins>150円</ins><del>1,500円</del></p>

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

<style>

body { background-color: #fff ; }

</style>

</script>