Theory
Theory
Comments

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.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Return to home </nav> </header> <main> <article> <h1>Day Eleven. Everything should be taken in moderation.</h1> <p>I realized that I fed the cat too much. The cat decided to remove this item from the to-do list so that he would be able to walk across the snow and not fall through it.</p> <ol> <li>Feed the cat</li> <li>Water the cactus</li> <li>Turn off the light</li> <li>Leave the house to run errands</li> </ol> </article> <aside> Your ad could go here </aside> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } time { color: #6a2cce; }

Goalscompleted

Enclose the text of the first item in the list using the <del> tag.
Add another item with the text Do not forget to eat yourself after the crossed out list item,
and then enclose the text of the new list item using the <ins> tag.

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

Comments

Log in

Sign up

Restore access