ThomThom's Website

Document History Viewer – Making use of <del> and <ins>

22 Mar 08 - 07:57

I put together some quick examples to how <del> and <ins> can be used. It’s some of the HTML tags which doesn’t seem to get used allot.

Using jQuery I built a crude Document History Viewer. It’s basically a time machine for HTML documents where you can read the document as it where on a previous date.

The first example document simply displays some dummy text where I’ve added some <ins> and <del>. It’s the change log for the Colour Swatch gadget I made. The <ins> and <del> here are just added randomly. However, a change log is a good example where <ins> and <del> is useful to allow the user to read through the various changes to the product.

The second example shows how it can be used to present source code where you can see the various changes made to it. If you click on one of the changes you will get the time and date of the change along with the title all extracted from the <ins> or <del> element itself. It also present the cite URL and uses AJAX to fetch the extended information about the reason for the edit.

The third and final example is just a test to see how browsers dealt with ordered lists as <ins> and <del> was dynamically hidden and displayed. It appears to work fine. Only issue is that the <del> and <ins> has to wrap around the <li> element and this is not valid according to the W3Cspecifications. However, I see this as a flaw in the specifications and I think it’s OK to break it.

If you have some creations using <del> and <ins> I’d like to see it. It’s a set of HTML elements which adds good semantic value to a document, but is rarely used. The jQuery script in the examples are not the best. They are hacked and bashed as the requirement to it changes as I was experimenting. But if you find any use for it, feel free to use it.

<del> and <ins> in lists

22 Mar 08 - 07:16

While working on some examples to demonstrate <ins> and <del> with a document history viewer I came across an unexpected problem. If you want to remove or insert a whole list item, you can’t wrap it in <del> or <ins> as <ul> and <ol> only allows <li> children.

Putting <del> inside the <li> makes the browsers render the list item as it was empty but with the bullet, leaving an undesired result if you have set del { display: hidden; }.

This appears to be a case where the specifications haven’t taken into account every option. If you remove a list item at some point and would like to mark that up in your HTML document then you want to mark up the entire list item, including the <li> tag, not just it content.

Fortunately, it looks like all browsers will render <del><li>Lorem Ipsum</li></del> as I want, removing the entire list item including the bullet. This is invalid markup according to the specifications, but I think that this is a good example of where you can ignore that.

I posted a comment about this in the public W3C HTML news group. Hoping that it’d be added to the HTML5 specifications. So far there’s no response.