Visualization of tags used in web sites

While reading some Austin-based blogs I found “Websites as graphs,” a Java applet that reads all the tags used in a website and colorcodes and graphs them showing the relationships and nesting. The result is similar to organic floral structures and the coded complexity of a website is immediately apparent when you look at these graphics.

After entering BMC.com, I see it looks much like the CNN portal site, containing a yellow cluster of forms but mostly blue “flowers” containing link tags with some tables for layout. Little use of the <div> tag, but nested in such a way it’s likely a nice elegant use of <div>.

Visualizations such as these don’t always increase understanding when they stand alone. It’s better to compare to others, which is why I like the list of graphics he has on the” Websites as graphs,” page. Boingboing.net is my favorite with one bright firework-like burst of thousands of links. It is, after all, “a directory of wonderful things.”

We’ve been doing some modeling of deliverables, and I do wonder if a visual representation would be helpful here. Sometimes the Table of Contents is the best visual representation you can get. Other times an Index is a somewhat visual representation of the content. I wonder if a better visual representation of content could be on the horizon with topic-based authoring.

Subscribe to the comments for this post