HTML <ins> Tag

The HTML <ins> tag is used to represent text that has been inserted into a document. It is commonly paired with the <del> tag, which represents text that has been removed. The <ins> tag visually highlights the inserted text by default, usually with an underline, and can also include metadata about the insertion using attributes.

The <ins> tag is often used in collaborative editing, document versioning, or other scenarios where tracking changes is necessary.

Basic Syntax of HTML <ins> Tag

The basic structure of the <ins> tag is:

</>
Copy
<ins>Inserted text</ins>

The text enclosed within the <ins> tag will be displayed with an underline by default, indicating that it has been added.

Attributes of HTML <ins> Tag

  • cite: Specifies the source of the insertion, usually a URL or reference document.
  • datetime: Indicates the date and time when the text was inserted, in the YYYY-MM-DDThh:mm:ss format.
  • Global Attributes: Supports all global attributes, such as id, class, style, and title.
  • Event Attributes: Supports event attributes like onclick, onmouseover, and onfocus.

Basic Example of HTML <ins> Tag

Here’s an example of using the <ins> tag to indicate added text:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>The updated document states: <ins>This policy is now effective immediately.</ins></p>
    </body>
</html>

Explanation: The text inside the <ins> tag is visually marked as newly added content, typically underlined.

Using Attributes with the <ins> Tag

You can include additional metadata using the cite and datetime attributes:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>The updated terms include: 
            <ins cite="https://www.example.com/terms" datetime="2024-12-10T10:30:00">
                Additional clauses about data usage.
            </ins>
        </p>
    </body>
</html>

Explanation: The cite attribute points to the source of the insertion, and the datetime attribute specifies when the text was added.

Styling the <ins> Tag with CSS

You can customize the appearance of the <ins> tag using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            ins {
                color: green;
                text-decoration: none;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p>The updated statement includes: 
            <ins>All team members are required to attend the meeting.</ins>
        </p>
    </body>
</html>

Result: The inserted text appears in bold green without the default underline, as styled by the CSS rules.

Using <ins> and <del> Together

The <ins> tag is often paired with the <del> tag to show text modifications:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <p>The document was revised to say: 
            <del>The meeting is postponed.</del> 
            <ins>The meeting is scheduled for tomorrow.</ins>
        </p>
    </body>
</html>

Explanation: The <del> tag represents removed text, while the <ins> tag highlights the inserted text, providing a clear visual representation of changes.

Practical Applications of the <ins> Tag

  • Document Editing: Track changes in collaborative editing environments.
  • Version Control: Show added content in updated versions of a document.
  • Legal Texts: Highlight modifications in contracts, policies, or terms and conditions.
  • Web Content Updates: Mark recently added content on a webpage.