May 27, 2006

HTML DOM-Trees as Graphs

There are quite a few graph tools that visualize the structure of an entire website. htmlgraph is one that visualizes the structure of the HTML DOM-tree of a single page. What makes it interesting is that it color-codes the different HTML elements:

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

Here are the DOM-tree graphs of a few popular German blogs, and of mine:

 

Click to enlarge
hebig.org
The part below the single green dot is my sidebar, above it is the main pane: concise, things inside divs structured by lots of p-tags, lots of links in each blog posting.

 

Click to enlarge
vowe.net
Similar structure with sidebar and main pane, the latter looking pretty clean. The top right cluster could be the "Other recent entries" part at the bottom of the main pane.

 

Click to enlarge
spreeblick.de
The big center cluster should be the li-structured sidebar.

 

Click to enlarge
wirres.net
Der Name ist Programm - does exactly as it says on the tin ;-) Red dots are table markup.

4 Comments

Very cool. Posted the visualisation of my blog here: http://www.roell.net/weblog/newsfeed/2006/05/27.shtml#009868
Sidebar to the left (with a dense ball of links to archives at the bottom), weblog-entries to the right.

Moritz Petersen said at May 27, 2006 8:21 PM :

Das ist ja echt interessant!

@Christian: Die ist ja schon im Body definiert, was ausreichend ist. Der CSS-Validator http://xrl.us/ms38 gibt allerdings aus Robustheitsgründen Warnungen aus, wenn man "color" ohne "background-color" und umgekehrt verwendet - das hat allerdings nichts mit Hintergrundbild oder nicht zu tun. Die Ursachen der bisher aufgetretenen color-Warnungen habe ich dennoch entfernt. When in doubt, reload.

Now this is a kind of modern art I truly can enjoy !

Write a comment

Migration and repair works in progress, so things might look a bit odd at the moment

This is the personal webnode
of Haiko Hebig

Contact the Author
Earlier Entries
Links