Consultants Network

View Website Structure as a Graphic.

websites-as-graphsHere is an facinating website that creates colorful graphics that visualize the structure of whatever webpage you give it.

Websites as Graphics

Type in a website address and watch as intricate flower patterns springs to life based on the pattern of HTML tags used in that particular site.

But is it useful?

These website graphics are more entertaining than useful. However they do provide some interesting visual feedback on how different websites are designed. The colors used for each dot represent a different type of HTML tag:

blue: for links (the A tag)
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