<ins>

The <ins> tag is used to display added content. For example, a new item in a to-do list or a new part of code.

The tag has a built-in role insertion. Thanks to it, users of screen readers know that the content has been added.

        
          
          <h4>To-Do List</h4><ul>  <li>Wash dishes</li>  <li>Water flowers</li>  <li>    <ins>Walk the dog</ins>  </li>  <li>    <ins>Vacuum the room</ins>  </li></ul>
          <h4>To-Do List</h4>
<ul>
  <li>Wash dishes</li>
  <li>Water flowers</li>
  <li>
    <ins>Walk the dog</ins>
  </li>
  <li>
    <ins>Vacuum the room</ins>
  </li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

By default, browsers apply underline to <ins> using text-decoration: underline. The same effect can be achieved using the <u> tag or simply applying text-decoration: underline to the text. However, <ins> should be used when it is important to emphasize that some content has been added. Although visually there will be no difference, it will help, for example, users of screen readers.

In addition to global attributes, <ins> has specific ones:

• cite allows referencing information about the edit;
• datetime allows specifying the time of the edit.

Both attributes are optional and help clarify the edit.

        
          
          <h4>Project Submission</h4><ul>  <li>    <del>      Call the contractor regarding the reports    </del>  </li>  <li>    <ins cite="https://our-cool-customers.com/reports/upload">      Upload the report to the client's service    </ins>  </li>  <li>    <ins datetime="2021-12-21T15:00Z">      Call the contractor again and remind about the reports    </ins>  </li></ul>
          <h4>Project Submission</h4>
<ul>
  <li>
    <del>
      Call the contractor regarding the reports
    </del>
  </li>
  <li>
    <ins cite="https://our-cool-customers.com/reports/upload">
      Upload the report to the client's service
    </ins>
  </li>
  <li>
    <ins datetime="2021-12-21T15:00Z">
      Call the contractor again and remind about the reports
    </ins>
  </li>
</ul>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

By default, attribute values are invisible to the user, but they can be automatically displayed using scripts. For example, we can add the date and time of addition to all new items, and it will look something like this:

        
          
          <pre>  body {    font-size: 16px;    <del>color: black;</del>    <ins>color: white;</ins>  }</pre>
          <pre>
  body {
    font-size: 16px;
    <del>color: black;</del>
    <ins>color: white;</ins>
  }
</pre>

        
        
          
            
            Copy
            Copied
            Failed to copy