A visualization of the html elements of website pages


There is a tool to visualize elements of web sites at aharef.info. I tried it with this blog by plotting on a graph the html elements. Watching the graph unfold whilst it finds html code on the site and plots it is fascinating. This was the graph in July 2009:


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

The graph hasn’t changed much since then. The reason is that the graph is designed not to highlight the structure of a web site, but the template of one of their pages. WordPress is of course pretty stable in its html layout over time and each update of versions. I am not playing with many changes in the layout either, so the graph hasn’t changed much in the last months.

I tried the visualization applet in other websites that share the same template. I could not help it, I run the little tool on the homepages of two of a few sites I am experimenting with (disclaimer):

The graphs look identical if only rotated with a different angle. The applet seems to pick a different element of the html and then fills up the space iteratively.

3 thoughts on “A visualization of the html elements of website pages

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.