HTML <Ins> Tag

Definition

The <ins> tag indicates the content has been inserted into the document. Browsers will display the insert element as underlined.

Example

<p>There are some <ins>enlightening inserted</ins> words in this paragraph</p>

Usage

• Both the starting and closing tags are mandatory.
• When coupled with the <ins> tag (indicates text has been inserted into the document), the <ins> tag can be used to show “tracked changes” or source code diff.

Attributes

The <ins> element supports the Global Attributes, as well as the following:

• cite

  • The cite attribute is used to specify the URL or fragment of a document that states the reason the text was inserted. For example:

    <p>There are some <ins cite="#inserted1">inserted</ins> words in this paragraph</p>
    <p id="inserted1">Demonstrating the ins element</p>

• datetime

  The datetime attribute specifies the date and optionally the time that the text was inserted. The datetime’s attribute’s value must be a valid date string. For example:

  <p>There are some <ins datetime="2009-10-10T23:38-07:00" cite="Demonstrating ins element">inserted words</ins> in this paragraph</p>

Best Practices

• Most screen readers do not announce the <ins> element. You can use CSS to add hidden content before and after the <ins> element, which screen readers will announce.

  For example, you can adapt this technique:

  <style>
  ins::before, mark::after {
  content:" [insertion start] ";
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  }
  mark::after {
  content:" [insertion end] ";
  }
  </style>
  <p>
  <ins>This inserted text</ins> is shown as inserted.
  </p>

  Some users of screenreaders may disable announcing such long-winded content, so the best practice is probably to avoid using the <ins> element unless absolutely necessary.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile