Definition and Usage

The <ins> tag represents a range of text that has been added to a document or content that has been inserted.

Usage Examples

Range of Added Text

HTML 
<p>My favorite color used to be <del>red.</del> <ins>blue.</ins></p>
Rendered Output

The <ins> tag is primarily used to emphasize changed text and visually indicate modifications to users. This is useful for tracking changes in documents or source code. Most browsers display inserted text with an underline by default.

The <del> tag serves the opposite purpose, representing a range of text that has been deleted in an HTML document.

Inserted Content

The <ins> tag is often used to wrap third-party content such as advertisements, since ads are considered inserted content on web pages.

Below is an example of the <ins> tag used in Google's advertising system, Google AdSense :

HTML 
<ins class="adsbygoogle">
    <!-- Ad content -->
</ins>

Attributes

The <ins> tag supports all global attributes.

cite Attribute

The cite attribute of the <ins> tag specifies the URL of a resource that explains the reason for the inserted content.

This attribute is optional, but it can be helpful for providing additional context to users by linking to the source or explanation of the change.

You might use the cite attribute to reference a webpage containing detailed information about the update, meeting notes, a support ticket, or any other relevant documentation.

HTML 
<p>
    This is a note about the latest update.
    <ins cite="https://example.com/changelog">
        Details of the latest update...
    </ins>
</p>

In the example above, the cite attribute points to a URL that provides more information about the inserted content.

Note that the value of the cite attribute is not displayed to users in the browser. However, it can be useful for authors, developers, or search engines.

datetime Attribute

The datetime attribute of the <ins> tag specifies the date and time when the content was inserted.

The datetime attribute of the <ins> tag specifies the date and time when the content was inserted.

This attribute is also optional, but when used, it clearly indicates the exact time and date of the change. It can help with version tracking or communicating time-sensitive updates.

Valid Values for datetime

The value of the datetime attribute must be a valid date or date-time string as defined by the HTML specification.

Here's an example that includes both cite and datetime attributes:

HTML 
<p>
    This is a note about the latest update.
    <ins cite="https://example.com/changelog" datetime="2024-11">
        Details of the latest update...
    </ins>
</p>

Important Note

The <ins> tag should not be used across paragraph boundaries. Its use must be structurally clear and properly scoped. Ambiguous placement can lead to unclear document structure and incorrect semantics.

Let's look at an example:

HTML 
<!-- Incorrect usage: <ins> tag crossing paragraph boundaries -->
<aside>
    <!-- Do not use the <ins> tag like this -->
    <ins>
        <!-- This improperly spans across paragraphs -->
        <p>I like fruit.</p> <!-- First paragraph starts -->
        Apples are <em>delicious</em>. <!-- Paragraph ends implicitly -->
    </ins>
    <ins>
        Pears are also tasty. <!-- Second paragraph starts -->
    </ins> <!-- Second <ins> ends -->
</aside>

<!-- Correct usage: clear structure with <ins> tags -->
<aside>
    <ins>
        <p>I like fruit.</p> <!-- First paragraph -->
    </ins>
    <ins>
        Apples are <em>delicious</em>. <!-- Second paragraph -->
    </ins>
    <ins>
        Pears are also tasty. <!-- Third paragraph -->
    </ins>
</aside>
  1. In the first example, the <ins> tag spans across two paragraphs, which leads to ambiguous boundaries. This is considered improper usage.
  2. In the second example, each change is clearly marked using separate <ins> tags for each paragraph. This provides a cleaner structure and makes it easier to track modifications.

Therefore, when using the <ins> tag, it's important to keep paragraph boundaries and structural divisions clear. Doing so helps maintain a well-structured document and improves readability and accessibility for users.

Browser compatibility

Browser compatibility for the ins tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<ins> 1 12 1 4

Specifications

Specification for the ins tag
Specification
<ins> HTML Standard
#the-ins-element

References

See also