I remember long ago finding a great java applet online that allowed you to view any website as a huge entanglement of colour coded nodes, representing every type of tag in your HTML source code, connected to each other to give a visual layout at what your source code looks like. Finding it again has eluded me for a long time but I finally found it today and I’m rather chuffed with myself! The HTML DOM Visualizer is a great way to see how well layed out your website is, how many of each tag you employ in you sites design, and it’s really just a very novel idea – I’ve never seen any other similar program. I wonder if there’s a way to deduce how search engine friendly a website is just by looking at its DOM graph – any ideas?… anyone?…. hello?….
Here is what each colour in the chart means:
- blue: for links (‘a’ tags)
- red: for tables (‘table’, ‘tr’ and ‘td’ tags)
- green: for the ‘div’ tag
- violet: for images (the ‘img’ tag)
- yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
- orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
- black: the HTML tag, the root node
grey: any other tags
As a perfect example, here’s how this site looks when passed through the script:
To see the applet in action check out how the graph for projectVISUAL evolves.
