Use-Cases of this tutorial
- Know how to semantically represent changes done to a HTML page.
- Know about the <ins> and <del> tags.
The <ins> and <del> HTML tags can be used to represent changes that have been done to the page.
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 SennaRendered 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.