HTML / HTML Tags

HTML <Ins> Tag

Oct 12, 2022
2 min read
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>

There are some enlightening inserted words in this paragraph

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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes