HTML `<ins>` 挿入テキスト要素

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

<ins> は HTML の要素で、文書に追加されたテキストの範囲を表します。同様に、 <del> 要素を使用して文書から削除されたテキストの範囲を表すことができます。

試してみましょう

<p>&ldquo;You're late!&rdquo;</p>
<del>
  <p>&ldquo;I apologize for the delay.&rdquo;</p>
</del>
<ins cite="../how-to-be-a-wizard.html" datetime="2018-05">
  <p>&ldquo;A wizard is never late &hellip;&rdquo;</p>
</ins>

del,
ins {
  display: block;
  text-decoration: none;
  position: relative;
}

del {
  background-color: #ffbbbb;
}

ins {
  background-color: #d4fcbc;
}

del::before,
ins::before {
  position: absolute;
  left: 0.5rem;
  font-family: monospace;
}

del::before {
  content: "−";
}

ins::before {
  content: "+";
}

p {
  margin: 0 1.8rem;
  font-family: "Georgia", serif;
  font-size: 1rem;
}

属性

この要素にはグローバル属性があります。

cite: 会議の議事録やトラブルシューティングシステムのチケットといった、追加についての説明を記したリソースへの URI を示します。
datetime: この属性は変更が行われた日時を示し、有効な日付または日時の文字列でなければなりません。値が日付または日時の文字列として解釈できなかった場合は、要素にタイムスタンプが関連付けられなくなります。時刻がない日付の書式については、妥当な日付文字列の書式を参照してください。日付と時刻の両方を含む場合の文字列の書式については、妥当な日時文字列の書式を参照してください。

アクセシビリティ

<ins> 要素が存在することは、多くの読み上げ技術の既定の設定では読み上げられません。 CSS の content プロパティを ::before および ::after 擬似要素と共に使うことで読み上げさせることができます。

css

ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: " [挿入開始] ";
}

ins::after {
  content: " [挿入終了] ";
}

スクリーンリーダーを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが挿入されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。

例

html

<ins>このテキストは挿入されました</ins>

結果

技術的概要

コンテンツカテゴリー	記述コンテンツまたはフローコンテンツ
許可されている内容	透過的コンテンツ
タグの省略	なし。開始タグと終了タグの両方が必須です。
許可されている親要素	記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール	`insertion`
許可されている ARIA ロール	すべて
DOM インターフェイス	`HTMLModElement`

仕様書

仕様書
HTML # the-ins-element

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2026年5月25日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

HTML <ins> 挿入テキスト要素

MDN の改良に協力

HTML `<ins>` 挿入テキスト要素