Inserted Text (ins)

Learn how to use the HTML <ins> element to semantically mark text that has been added to a document, improving accessibility and enabling clear change tracking.

What it is

The <ins> element represents a range of text that has been added to the document. It is part of the HTML specification for editing markup, designed to work alongside the <del> element (which marks deleted text). While browsers typically render inserted text with an underline by default, the primary purpose of <ins> is semantic: it tells assistive technologies and search engines that this content is new or revised, not just visually distinct.

Related terms include semantic HTML, accessibility, and change tracking.

Why it matters

• Accessibility: Screen readers can announce inserted text differently, helping users with visual impairments understand document revisions.
• Semantic Clarity: It distinguishes between text that is merely styled with CSS (like underlines) and text that actually represents an addition in content history.
• SEO Benefits: Search engines may interpret marked-up changes as updated content, potentially influencing indexing freshness.
• Maintainability: When paired with <del>, it creates a self-documenting record of edits within the source code itself.

Syntax or steps

The basic syntax wraps the added text inside opening and closing <ins> tags. You can optionally add attributes like cite (a URL referencing the reason for the change) and datetime (the date and time of the insertion).

<ins cite="URL" datetime="YYYY-MM-DDThh:mm:ss">Added Text</ins>

Example

Here is a realistic example showing a sentence where a word was replaced. The old word is wrapped in <del> and the new word in <ins>.

<p>
  The meeting is scheduled for 
  <del datetime="2023-10-01T09:00:00Z">Monday</del> 
  <ins datetime="2023-10-01T09:00:00Z">Tuesday</ins>.
</p>

Part-by-part explanation:

• <p>: Defines the paragraph container.
• <del datetime="...">Monday</del>: Marks "Monday" as removed. The datetime attribute specifies when the deletion occurred.
• <ins datetime="...">Tuesday</ins>: Marks "Tuesday" as added. Browsers usually display this with an underline.
• </p>: Closes the paragraph.

Common mistakes

• Using only CSS for semantics: Applying text-decoration: underline via CSS does not inform screen readers that the text is an insertion. Always use <ins> for actual content additions.
• Nesting errors: Do not nest <ins> inside another <ins> unless representing multiple layers of edits, which is rare and confusing. Keep structures flat where possible.
• Missing context: Using <ins> without <del> can be ambiguous if the reader doesn't know what was changed. Pair them logically when replacing text.
• Invalid attributes: Ensure datetime follows the ISO 8601 format. Incorrect formats are ignored by validators and assistive tech.

When to use it

Use <ins> when you need to indicate that content has been added since the last version. Compare it with simple styling below:

Practice

Guided Exercise: Write a paragraph stating that the price of a book changed from $10 to $15. Use <del> for the old price and <ins> for the new price.

Challenge: Add a cite attribute to your <ins> tag pointing to a hypothetical blog post explaining the price increase.

Hint: Your output should look similar to: <del>$10</del> <ins cite="blog.com/price-hike">$15</ins>

Quick check

Question: Does the <ins> element automatically make text bold?

Answer: No. By default, most browsers render <ins> text with an underline. Boldness must be applied separately using CSS or the <strong> element.

Summary

The <ins> element provides semantic meaning to added content, enhancing accessibility and clarity beyond mere visual styling. It works best when paired with <del> to track document revisions accurately.