<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年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>