HTML <ins> Tag
The HTML <ins> tag is used to denote text that has been inserted into a document. It's a semantic element, indicating that the enclosed content is an addition to the original content, making it valuable for revision tracking and highlighting changes in web documents. This element is particularly useful in collaborative environments where multiple authors work on a single document.
Syntax
<ins cite="url" datetime="YYYY-MM-DDThh:mm:ssZ">Inserted Text</ins>
Attributes
| Attribute | Value | Description |
|---|---|---|
cite |
URL | Specifies a URL to a resource that explains the reason for the change. |
datetime |
YYYY-MM-DDThh:mm:ssZ | Indicates the date and time that the insertion was made. The time should be in UTC format, indicated by the 'Z' at the end. |
Example
<p>This is the original sentence. <ins>This text has been inserted.</ins> We continue the sentence.</p>
More Examples
Basic Usage
This example demonstrates the basic use of the <ins> tag to mark inserted text. The inserted text will typically be rendered with an underline by default in most browsers, visually indicating the change.
<p>The meeting is scheduled for <del>Tuesday</del> <ins>Wednesday</ins> at 2 PM.</p>
Using cite Attribute
The cite attribute provides a link to more information about the insertion. This is helpful when detailed context for the change is needed, like linking to a revision log, a task tracker or a change proposal.
<p>The new policy states: <ins cite="/policy-updates/2024-05-03">All employees are eligible for the new benefit.</ins></p>
Using datetime Attribute
The datetime attribute specifies when the insertion was made. This attribute is useful for tracking revisions in chronological order and for providing further context.
<p>The product description now includes: <ins datetime="2024-05-03T10:30:00Z">This product comes with a lifetime warranty.</ins></p>
Combined Attributes
This shows how both the cite and datetime attributes can be used together to provide the most detailed contextual information for an insertion.
<p>The updated requirements include: <ins cite="/changes/req-1234" datetime="2024-05-03T14:45:00Z">The project must include unit tests.</ins></p>
Nested changes
Demonstrating how <ins> can be used with <del> to indicate more complex revisions
<p> The old text was: <del>Initial content.</del> The new text is: <ins>New, improved content.</ins></p>
<p> The old text was: <del>Initial content.<ins>Some inserted part.</ins></del> The new text is: <ins>New, improved content.</ins></p>
Browser Support
| Browser | Version |
|---|---|
| Chrome | All |
| Edge | All |
| Firefox | All |
| Safari | All |
| Opera | All |
The <ins> tag is widely supported across all major browsers, ensuring that your content is displayed correctly for all users.
Notes and Tips
- The
<ins>tag is a semantic element, meaning it carries meaning about the content it contains. Use it to accurately reflect insertions in your document. - When using
<ins>with<del>, make sure to visually distinguish the inserted text for easy comprehension by readers. - The
datetimeattribute uses a specific format (YYYY-MM-DDThh:mm:ssZ) to ensure consistent interpretation across different systems and locales. Always use UTC timestamps for this attribute. - Consider using CSS to further style the
<ins>element for greater visual impact if the default underline isn't sufficient. For example, use background color highlighting to grab user attention. - Use the
citeattribute when available to provide additional context to the readers. - The
<ins>tag can be used not only in paragraphs but also within other text-based elements like lists, headings, etc. - The
<ins>tag is particularly useful for web accessibility, as screen readers can communicate these insertions to users with disabilities. - Do not overuse this tag, use it only when marking actual changes to the document to avoid clutter.
