<ins> - The Inserted Text Element

The `<ins>` Element

Inline HTML 4.0

The inserted text element represents text that has been added or inserted into a document, typically displayed with an underline.

Quick Example

<p>The meeting is scheduled for <ins>Wednesday</ins> at 3 PM.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The meeting is scheduled for <ins>Wednesday</ins> at 3 PM.</p>

Syntax

<ins>inserted text</ins>

The <ins> element indicates text that has been added during editing or revision.

Attributes

Optional Attributes

Attribute	Description	Example
`cite`	URL explaining the insertion	`cite="https://example.com/changelog"`
`datetime`	When insertion occurred	`datetime="2024-12-11T10:30:00"`

<p>Price: $79.99 <ins cite="/changelog" datetime="2024-12-11">Free shipping included!</ins></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Price: $79.99 <ins cite="/changelog" datetime="2024-12-11">Free shipping included!</ins></p>

Common Use Cases

Document Updates

<p>The deadline has been extended to <ins>December 25, 2024</ins>.</p>
<p>New contact email: <ins>support@example.com</ins></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The deadline has been extended to <ins>December 25, 2024</ins>.</p>
<p>New contact email: <ins>support@example.com</ins></p>

Additions and Corrections

<p>The population is 5.2 million <ins>as of 2024</ins>.</p>
<p>Available in red, blue, <ins>and green</ins>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The population is 5.2 million <ins>as of 2024</ins>.</p>
<p>Available in red, blue, <ins>and green</ins>.</p>

With Deletions

Show the full edit history by combining <del> and <ins>:

<p>The event will be held in <del>New York</del> <ins>San Francisco</ins>.</p>
<p>Price: <del>$500</del> <ins>$450</ins></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The event will be held in <del>New York</del> <ins>San Francisco</ins>.</p>
<p>Price: <del>$500</del> <ins>$450</ins></p>

Change Log

<section>
<h3>Version 2.1 Updates</h3>
<ul>
  <li><ins datetime="2024-12-11">Added dark mode support</ins></li>
  <li><ins datetime="2024-12-10">Improved loading speed by 40%</ins></li>
  <li><ins datetime="2024-12-09">New search functionality</ins></li>
</ul>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h3>Version 2.1 Updates</h3>
<ul>
  <li><ins datetime="2024-12-11">Added dark mode support</ins></li>
  <li><ins datetime="2024-12-10">Improved loading speed by 40%</ins></li>
  <li><ins datetime="2024-12-09">New search functionality</ins></li>
</ul>
</section>

Additional Information

<p>
All participants must arrive by 9 AM
<ins datetime="2024-12-11">and bring valid ID</ins>.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
All participants must arrive by 9 AM
<ins datetime="2024-12-11">and bring valid ID</ins>.
</p>

Legal Document Amendments

<article>
<h4>Policy Update</h4>
<p>Section 4.3: Users must verify their email address within 48 hours <ins cite="/amendments/2024-12" datetime="2024-12-01">or account will be temporarily suspended</ins>.</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h4>Policy Update</h4>
<p>Section 4.3: Users must verify their email address within 48 hours <ins cite="/amendments/2024-12" datetime="2024-12-01">or account will be temporarily suspended</ins>.</p>
</article>

Styling

Customize inserted text appearance:

<style>
ins {
  text-decoration: underline;
  color: #0c6;
  background: #e6ffe6;
  padding: 2px 4px;
}
ins:hover::before {
  content: '+ ';
  font-weight: bold;
}
</style>

<p>New feature: <ins>automatic backups</ins> enabled by default.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
ins {
  text-decoration: underline;
  color: #0c6;
  background: #e6ffe6;
  padding: 2px 4px;
}
ins:hover::before {
  content: '+ ';
  font-weight: bold;
}
</style>

<p>New feature: <ins>automatic backups</ins> enabled by default.</p>

Diff View

<style>
.diff { font-family: monospace; }
.diff del {
  background: #ffd7d7;
  color: #c00;
  text-decoration: line-through;
  padding: 2px;
}
.diff ins {
  background: #d7ffd7;
  color: #0c0;
  text-decoration: none;
  padding: 2px;
}
</style>

<div class="diff">
<p><del>function oldName() {</del></p>
<p><ins>function newName() {</ins></p>
<p>  return true;</p>
<p>}</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.diff { font-family: monospace; }
.diff del {
  background: #ffd7d7;
  color: #c00;
  text-decoration: line-through;
  padding: 2px;
}
.diff ins {
  background: #d7ffd7;
  color: #0c0;
  text-decoration: none;
  padding: 2px;
}
</style>

<div class="diff">
<p><del>function oldName() {</del></p>
<p><ins>function newName() {</ins></p>
<p>  return true;</p>
<p>}</p>
</div>

Real-World Examples

Product Updates

<div class="product-update">
<h3>Premium Plan</h3>
<ul>
  <li>100 GB storage</li>
  <li>Email support</li>
  <li><ins datetime="2024-12-11">Priority customer service</ins></li>
  <li><ins datetime="2024-12-11">Advanced analytics</ins></li>
</ul>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="product-update">
<h3>Premium Plan</h3>
<ul>
  <li>100 GB storage</li>
  <li>Email support</li>
  <li><ins datetime="2024-12-11">Priority customer service</ins></li>
  <li><ins datetime="2024-12-11">Advanced analytics</ins></li>
</ul>
</div>

Recipe Improvements

<div class="recipe">
<h4>Chocolate Cake Recipe</h4>
<p><strong>Instructions:</strong></p>
<ol>
  <li>Preheat oven to 350°F</li>
  <li>Mix dry ingredients <ins>and sift twice</ins></li>
  <li>Combine with wet ingredients</li>
  <li>Bake for 30 minutes <ins>or until toothpick comes out clean</ins></li>
</ol>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="recipe">
<h4>Chocolate Cake Recipe</h4>
<p><strong>Instructions:</strong></p>
<ol>
  <li>Preheat oven to 350°F</li>
  <li>Mix dry ingredients <ins>and sift twice</ins></li>
  <li>Combine with wet ingredients</li>
  <li>Bake for 30 minutes <ins>or until toothpick comes out clean</ins></li>
</ol>
</div>

News Article Corrections

<article>
<p><strong>Correction:</strong> An earlier version of this article stated the event would be held on Monday. <ins datetime="2024-12-11T15:30:00">The event will actually be held on Tuesday, December 15.</ins></p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p><strong>Correction:</strong> An earlier version of this article stated the event would be held on Monday. <ins datetime="2024-12-11T15:30:00">The event will actually be held on Tuesday, December 15.</ins></p>
</article>

Code Documentation

<pre><code>function calculateTotal(items) {
let total = 0;
<ins>// Added validation check</ins>
<ins>if (!Array.isArray(items)) return 0;</ins>

items.forEach(item => {
  total += item.price;
});
return total;
}</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<pre><code>function calculateTotal(items) {
let total = 0;
<ins>// Added validation check</ins>
<ins>if (!Array.isArray(items)) return 0;</ins>

items.forEach(item => {
  total += item.price;
});
return total;
}</code></pre>

With Metadata

Provide detailed change information:

<p>
Base price: $99.99
<ins
  cite="https://example.com/pricing-update"
  datetime="2024-12-11T09:00:00">
  Holiday discount: -$20
</ins>
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>
Base price: $99.99
<ins
  cite="https://example.com/pricing-update"
  datetime="2024-12-11T09:00:00">
  Holiday discount: -$20
</ins>
</p>

Accessibility

Many screen readers announce inserted text as “insertion” or “added,” helping users understand the content status.

Provide Context

Make additions clear and meaningful:

Unclear
Clear

<p><ins>New policy</ins></p>

<p><ins>New refund policy: 30-day money-back guarantee</ins></p>

Use with ARIA

For complex edits:

<p>
  Features:
  <ins aria-label="Added December 11, 2024">
    Dark mode, Auto-save
  </ins>
</p>

Block-Level Insertions

The <ins> element can wrap block-level content:

<article>
<h3>Existing Content</h3>
<p>This paragraph was always here.</p>

<ins datetime="2024-12-11">
  <h3>New Section</h3>
  <p>This entire section was added in the latest update.</p>
</ins>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h3>Existing Content</h3>
<p>This paragraph was always here.</p>

<ins datetime="2024-12-11">
  <h3>New Section</h3>
  <p>This entire section was added in the latest update.</p>
</ins>
</article>

Revision History Example

<article>
<h3>Document Revisions</h3>
<p>Original text remains here.</p>

<p>
  <del datetime="2024-12-10T10:00:00" cite="/rev/1">
    Old procedure: Submit by email.
  </del>
  <ins datetime="2024-12-11T14:00:00" cite="/rev/2">
    New procedure: Submit via online portal.
  </ins>
</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h3>Document Revisions</h3>
<p>Original text remains here.</p>

<p>
  <del datetime="2024-12-10T10:00:00" cite="/rev/1">
    Old procedure: Submit by email.
  </del>
  <ins datetime="2024-12-11T14:00:00" cite="/rev/2">
    New procedure: Submit via online portal.
  </ins>
</p>
</article>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	4+	Full support

The <ins> element has excellent browser support across all versions.

For deleted or removed text. Learn more →

~~For text that is no longer accurate. Learn more →~~

Specifications
Section titled “Specifications”

WHATWG HTML Living Standard

MDN Web Docs

Previous
<i> - The Idiomatic Text Element Next
<kbd> - The Keyboard Input Element

<ins> - The Inserted Text Element

The <ins> Element

Quick Example

Syntax

Attributes

Optional Attributes

Common Use Cases

Document Updates

Additions and Corrections

With Deletions

Change Log

Additional Information

Legal Document Amendments

Styling

Diff View

Real-World Examples

Product Updates

Recipe Improvements

News Article Corrections

Code Documentation

With Metadata

Accessibility

Screen Reader Behavior

Provide Context

Use with ARIA

Block-Level Insertions

Revision History Example

Browser Support

Related Elements

Specifications

The `<ins>` Element