The del and ins tags, which are used to highlight changes

Many people use a To-do list to organise their work (or even their leisure). A To-do list allows you to easily keep track of completed tasks and add new ones. How can you mark up such a change history using HTML?

The tags <del> (which is short for “delete”) and <ins> (which is short for “insert”) are intended to be used to describe such changes.

The <del> tag is used to highlight text that has been deleted in the new version of the document. This text is displayed as being crossed-out in the browser.

The <ins> tag is used to highlight text that has been added in the new version of the document. This text is displayed as being underlined in the browser.

Both tags have a datetime attribute that lets you specify the date and time when this or that edit was made.

The to-do list is the simplest example of how these tags are used. When an item on the list has been completed, it is marked using the <del> tag, but if a new item has been added to the list, then it is added to the list and marked with the <ins> tag.

<ul>
  <li>Clean the dishwasher</li>
  <li><del datetime="2009-10-11T01:25-07:00">Take a walk</del></li>
  <li><del datetime="2009-10-10T23:38-07:00">Take a nap</del></li>
  <li><ins>Buy a printer</ins></li>
</ul>

The datetime attribute is not intended for human consumption, but rather for computers. Therefore, the date and time are written there in a standardized format. When you use such markup, it is easier for programs to parse documents and analyze when certain changes have occurred.