Website Visualization

This is a cool way of visually looking at a website. Here is what would look like. I first saw this on my friend Gabe’s blog. Thanks!


What it all means?

  • 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
  • gray: all other tags

Graph other website here: Websites as Graphs