HTML <ins> Tag

What is the <ins> Tag?

The <ins> tag stands for “inserted text.” It’s used when you want to show that some content has been added to a webpage or document. By default, browsers display inserted text with an underline to make it stand out.

It’s especially useful when:

• You’re updating content and want to highlight the new changes.
• You’re tracking edits, like in documents or blog posts.
• You’re showing modifications in things like terms of service or legal documents.

You’ll often see <ins> paired with the <del> tag, which marks deleted text. Together, they make it easy to track what’s new and what’s been removed.

How Does the <ins> Tag Work?

Here’s the basic structure:

<ins>Newly Added Text</ins>

When you put text inside <ins>, it tells the browser, “Hey, this is something new!” And the browser will usually underline it to catch people’s attention.

Example 1: Adding New Text

Let’s say you’ve updated a paragraph and want to highlight the new part:

<p>Our office hours are now <ins>9 AM to 6 PM</ins>.</p>

In this example, “9 AM to 6 PM” will appear underlined, making it clear to readers that this information is new.

Example 2: Tracking Changes with <ins> and <del>

Imagine you’re updating a meeting schedule. You can show what’s been removed and what’s been added like this:

<p>Our next meeting is on <del>Monday</del> <ins>Tuesday</ins>.</p>

Here’s what happens:

• “Monday” will have a line through it (strikethrough), showing it’s been deleted.
• “Tuesday” will be underlined, showing it’s the new meeting day.

It’s like using red ink to cross something out and a highlighter to mark the new info.

Example 3: Adding a Timestamp with datetime

Want to show when you made the change? You can add the datetime attribute to the <ins> tag:

<p>Our policy was updated on <ins datetime="2025-02-05T10:00:00Z">February 5, 2025</ins>.</p>

While the date won’t be visible on the page, it’s stored in the code. This can be helpful for search engines or anyone digging into the document’s history.

Example 4: Adding a Source with cite

You can even link to a source that explains why the change was made using the cite attribute:

<p>The new rule is <ins cite="https://example.com/new-rule">effective immediately</ins>.</p>

Again, this link won’t be visible, but it adds background information for anyone looking at the code or using assistive technology.

How to Style the <ins> Tag (Make It Look Cool)

By default, inserted text is underlined, but you can style it however you like with CSS. Here’s how to give it a fresh look:

<style>
    ins {
        background-color: #e0ffe0; /* Light green background */
        text-decoration: none;     /* Remove default underline */
        font-weight: bold;         /* Make the text bold */
        padding: 2px 4px;          /* Add some spacing */
        border-radius: 4px;        /* Rounded corners */
    }
</style>

<p>Don’t miss our <ins>brand new features!</ins></p>

Now, instead of a boring underline, the new text will have a highlighted background, bold font, and rounded corners—perfect for grabbing attention.

Real-World Examples

1. Blog Updates:<p>We've <ins>added a new section</ins> to cover advanced tips!</p>
2. Terms of Service Changes:<p>Users must be at least <del>13</del> <ins>16</ins> years old to register.</p>
3. Price Updates:<p>Special Offer: <del>$50</del> <ins>$40</ins> only!</p>

Why It’s Great for Accessibility

The <ins> tag isn’t just for looks—it’s semantic HTML, meaning it helps screen readers and search engines understand the content better. For people using screen readers, the inserted text will be announced as “inserted,” making sure everyone knows there’s been a change.

Quick Recap

• The <ins> tag highlights newly added content.
• By default, it underlines text.
• Use the datetime and cite attributes for extra context.
• Style it with CSS to make it stand out even more.
• Great for tracking content updates, document revisions, and website changes.

So, the next time you update your website or need to show changes, reach for the <ins> tag—it’s like your digital highlighter!