Webpages as Graphs

While looking on-line for inspirations and ideas for the Data project, I came across this really unusual graph.

Intrigued by the aesthetics, I decided to do more research to find out exactly what it represents. I found out that this graph is a representation of the data contained within the HTML of a webpage.

HTML is made up of 'tags', like the A tag for links, IMG tag for images and so on. These tags are arranged in a hierarchical manner, and that hierarchy can be represented as a graph. To put it in simpler words, each dot represents a tag in a webpage and the lines show how they all connect to each other in order to create a functional page.

Different colours are used for the dots to break down the HTML tags even further:

Blue: for links (the A tags)

Red: for tables (TABLE, TR and TD tags)

Green: for the DIV tags

Violet: for images (the IMG tags)

Yellow: for forms (FORM, INPUT, SELECT and OPTION tags)

Orange: for linebreaks and blockquotes (BLOCKQUOTE tag)

Black lines: the HTML tag, the root node

Grey: all other tags

As technical as it sounds, I want to somehow interpret it in my own work by applying the 'Selecting and editing' methods I learnt in the Origins unit in order to see where this idea can lead me towards.

Graph representation of my blog. It looks really complex as blogs consist of a lot of navigation tags connected  to each other.