Representing Edits to HTML Pages using〈ins〉&〈del〉Tags

Often there are edits made to documents. In HTML these changes can be highlighted using the <ins> and <del> tags.

These are semantic tags and reading them can help machines, scripts, bots etc to come to know about the changes in the document. They can use this information to render the document in their own format, or use it for data gathering and analytics purposes.

HTML <ins> Tag

The <ins> tag is used to highlight some information that was inserted into the document. This represents the newly added changes that have been done to the document.

Browser generally highlights the information within <ins> with an underline.

Sample Markup :

<ins>This is brand new information.</ins>

Rendered as :

HTML <del> Tag

The <del> tag is used to highlight some information that was removed from the document. This represents the newly removed changes that have been done to the document.

Browser usually highlights the enclosed information within <del> a strike-through.

Sample Markup :

Best ever will be <del>Lewis Hamilton</del>, <del>Michael Schmacher</del>, Ayrton Senna

Rendered as :

Explaining the Changes Done to Document

The HTML citation attribute, cite can be used to define the url of the resource that explains the changes done.

Both <ins> and <del> elements can have the cite attribute.

<ins cite="https://usefulangle.com/changes-made">The login code is 434345</ins>.

Indicating the Date-Time of the Changes

The datetime attribute can be used on both <ins> and <del> to denote the date & time at which the changes were applied to the document.

The login code is <del datetime="2019-11-27">434345.</del>

We are now implementing version <ins datetime="2019-11-27" cite="https://usefulangle.com/changes-made">2.54</ins> of the API.

The value of datetime should be as per the Date and time formats used in HTML.