Posted by Stephen Kiernan, follow me on Twitter.

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:

HTML DOM Visualizer of procectVISIAL.NET

To see the applet in action check out how the graph for projectVISUAL evolves.