HTML Free Codes<ins>
Defines text that has been inserted into a document
Definition and Usage
The <ins> element establishes text that has been inserted into a document. Browsers will usually underline inserted text.
This tag is useful for marking up editorial changes, document revisions, and collaborative editing scenarios where you need to show what content has been added.
The <ins> tag is often used together with the <del> tag to represent deleted and replaced text.
<ins> tag to show insertions and the <del> tag to show deletions. This helps track document changes and revisions.
<ins> with an underline. You can change this using CSS.
Browser Support
The <ins> tag is supported in all major browsers:
Attributes
| Attribute | Value | Description |
|---|---|---|
| cite | URL | Specifies a URL to a document that explains the reason why the text was inserted |
| datetime | YYYY-MM-DDThh:mm:ssTZD | Specifies the date and time when the text was inserted |
The <ins> tag also supports the Global Attributes in HTML.
The <ins> tag also supports the Event Attributes in HTML.
Examples
Basic Inserted Text
Mark text that has been inserted:
Example
<p>My favorite color is <ins>blue</ins>.</p>Inserted Text with Citation and DateTime
Add metadata about when and why text was inserted:
Example
<p>The meeting is scheduled for <ins cite="update-log.html" datetime="2025-01-15T10:00:00">3:00 PM</ins>.</p>Combined with Del Tag (Showing Changes)
Show both deleted and inserted text to track changes:
Example
<p>The price is <del>$99.99</del> <ins>$79.99</ins>.</p>
<p>Our office is located in <del>New York</del> <ins>San Francisco</ins>.</p>Document Revision Tracking
Track multiple revisions in a document:
Example
<article>
<h2>Company Policy Updates</h2>
<p>Effective <del datetime="2024-12-01">January 1, 2024</del>
<ins datetime="2025-01-15">February 1, 2025</ins>, all employees must:</p>
<ul>
<li>Complete security training</li>
<li><ins cite="policy-change.html" datetime="2025-01-15">Update their emergency contact information</ins></li>
<li>Review the updated handbook</li>
</ul>
</article>Styled Insertions with CSS
Customize the appearance of inserted text:
Example
<style>
ins {
background-color: #d4edda;
color: #155724;
text-decoration: none;
padding: 2px 4px;
border-radius: 3px;
}
ins.highlight {
background-color: #fff3cd;
color: #856404;
font-weight: bold;
}
del {
background-color: #f8d7da;
color: #721c24;
padding: 2px 4px;
border-radius: 3px;
}
</style>
<p>The deadline has been changed from <del>March 15</del> to <ins>March 30</ins>.</p>
<p><ins class="highlight">New feature:</ins> Dark mode is now available!</p>Legal Document Changes
Track amendments in legal or formal documents:
Example
<section>
<h3>Terms and Conditions - Amendment History</h3>
<p>Section 5.2: The cancellation period is <del>14 days</del>
<ins cite="amendment-2025-01.pdf" datetime="2025-01-15T14:30:00">30 days</ins>
from the date of purchase.</p>
<p><ins cite="amendment-2025-01.pdf" datetime="2025-01-15T14:30:00">
Section 7.4: All refunds will be processed within 5-7 business days.
</ins></p>
</section>Collaborative Editing Example
Show contributions from multiple editors:
Example
<article>
<h2>Project Proposal</h2>
<p>The project will take approximately <del>3 months</del>
<ins datetime="2025-01-10" data-author="John">4 months</ins> to complete.</p>
<p>Budget: <del>$50,000</del>
<ins datetime="2025-01-12" data-author="Sarah">$65,000</ins></p>
<p><ins datetime="2025-01-14" data-author="Mike">
Additional resources: We will need two senior developers for this project.
</ins></p>
</article>Try it Yourself
Interactive Example
See how inserted and deleted text appears:
Original price: $199.99 $149.99
Status: In Development Released
New: Free shipping on all orders!
<ins> vs <mark>
Understanding the difference between these similar tags:
| Feature | <ins> | <mark> |
|---|---|---|
| Purpose | Represents text that has been inserted into a document | Represents highlighted or marked text for reference |
| Default Style | Underlined text | Yellow background highlight |
| Use Case | Document revisions, tracking changes, showing additions | Search results, important passages, drawing attention |
| Semantic Meaning | Editorial insertion - content was added | Relevance marking - content is important or relevant |
| Common Attributes | cite, datetime | No specific attributes |
| Pairing | Often used with <del> | Standalone, no companion tag |
Common Use Cases
- Document Revisions: Track changes in legal documents, contracts, and formal papers
- Collaborative Editing: Show additions made by different team members
- Version Control: Display what content was added between different versions
- Editorial Changes: Mark editorial additions in published content
- Price Updates: Show updated pricing or promotional information
- Policy Updates: Highlight new clauses or amendments in policies
Best Practices
- Use
<ins>together with<del>to show both deletions and insertions - Add the
citeattribute to reference the source of the change - Include the
datetimeattribute to timestamp when the insertion was made - Style insertions appropriately to make them clearly visible but not distracting
- Use consistent styling across your document for all insertions and deletions
- Consider accessibility - ensure sufficient color contrast when styling
- For complex change tracking, consider using data attributes to store additional metadata
- Don't overuse - only mark significant changes or additions
Default CSS Settings
Most browsers will display the <ins> element with the following default values:
Default CSS
ins {
text-decoration: underline;
}