Explode any web pages lately?
By greimer on Nov 01, 2004
If you have any engineering sensibilities you're probably aware of what exploded diagrams are and why they're a valuable tool for understanding the innards of an otherwise simple-looking object. Take this diagram of the Sun Blade 2500 for example.
Being things that tend to be clean-looking on the outside but complex inside, web pages are perfect candidates for the exploded diagram, and I've actually got a bookmarklet to do this very thing. But before proceeding to the bookmarklet, let me explain what it does:
First, it strips out all presentational tags and attributes. This includes things like:
- border attributes
- cellpadding and cellspacing attributes
- align/valign attributes
- width/height attributes
- bold, italic, and underline tags
It doesn't strip out structural tags and attributes such as:
- colspan and rowspan attributes
- paragraph and blockquote tags
- list tags
- header tags
- table tags
- em, strong and code tags
It also strips out all scripts (including event handler attributes), iframes and plugin objects. It strips out all images and replaces them with their alt value, or a question mark if no alt value is supplied. It then applies a style sheet that emphasizes structure, highlighting the arrangement and nesting of elements. Semantically qualified elements like h1 are color coded, while semantically generic elements like div are a neutral gray.
The end result is a visualization of the page's structure in a non-visual context. Why would this be useful? Among other things, you get a feel for the accessibility of a page, and how careful the authors were to mark up the content in a semantically meaningful way. If a page is accessible and does a good job of separating structure from presentation you'll see a neatly arranged and colorful stack of information that is actually readable. If the page is inaccessible and does a poor job of separating structure and presentation you'll see a mind-bendingly bizarre maze of gray ziggurats peppered with question marks and empty blocks that is quite unreadable. Here's the bookmarklet. (To add, drag the link onto your bookmarks toolbar and rename it to whatever you want.) Try it on a few websites and you'll see what I mean.
[Update] Chris Adams reports that it works in the Safari browser. Rock on.
[Update] I've modified the bookmarklet to display table summaries since they're also part of a page's content structure.