Using the HTML `` Element to Mark Inserted Text: Enhancing Document Readability and Accessibility

Learn how to use the HTML `` (insertion) tag to semantically mark-up text that has been added to a document. This tutorial explains its functionality, attributes, browser compatibility, and how it improves document readability and accessibility for users of assistive technologies.

Using the HTML `` Element to Mark Inserted Text

Understanding the `` Element

The HTML <ins> (insertion) tag is used to indicate text that has been added to a document. Browsers typically render inserted text with an underline, improving readability. The `<ins>` tag adds semantic meaning to the marked-up text, helping screen readers and search engines understand its role within the document. It's important to use this tag correctly for accessibility and to improve clarity. For deleted content, use the `<del>` tag instead.

Using the `` Tag

To mark inserted text, simply place the text within the opening and closing `<ins>` tags.

<p>My favorite color is blue <ins>red</ins>!</p>

Adding Context with Attributes

The `` element supports attributes to provide additional context:

• cite: Specifies a URL providing more information about the insertion (e.g., a link to a document explaining the change).
• datetime: Specifies the date and time of the insertion (using the format YYYY-MM-DDThh:mm:ssTZD).

<p>My favorite color is blue <ins datetime="2024-03-15T14:30:00Z" cite="https://example.com/changes">red</ins>!</p>

Browser Support and Default Styling

The `` tag is widely supported by all major modern browsers. They typically display inserted text with an underline. You can modify this using CSS.

ins {
  text-decoration: underline;
}