ThomThom's Website

<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.


No comments

Comments are closed due to spam. Thank you spammers, well done!