<ins>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨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="../howtobeawizard.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: #fbb;}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 0;  font-family: Georgia, serif;  font-size: 1rem;}

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

属性

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

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

例

html

<ins>This text has been inserted</ins>

結果

アクセシビリティの考慮

<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: " [挿入終了] ";}

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