Document History Viewer – Making use of <del> and <ins>
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.
Comments
No comments
Archived Posts:
Subscribe to this Blog:
Labels:
- accessibility
- animation
- api
- background-image
- barcelona
- career
- changelog
- christmas
- code
- colour
- com
- css
- deardiary
- del
- desktopx
- distance
- documentation
- dom
- england
- events
- film
- fun
- gadget
- games
- gestures
- halloween
- html
- ie
- innerhtml
- ins
- javacript
- keyboard
- life
- list-style-image
- lists
- london
- modelmaking
- moving
- msn
- paintball
- performance
- php
- pingback
- pixar
- position
- printer
- product
- ruby
- scanner
- scheme
- scripting
- semantic
- server
- sidebar
- sketchup
- skype
- snow
- software
- speed
- split()
- test
- travel
- underground
- userinterface
- vertex
- vista
- voip
- w3c
- webdesign
- website
- whitespace