View HTML Tags as a Graph
Sala, over at Aharef has designed a javascript applet to graph the HTML of a webpage. He uses colour-coded dots to visually represent hundreds lines of HTML and the general structure of a webpage. It's fascinating. No two pages look the same.
HTML consists of so-called tags, like the A tag for links, IMG tag for images and so on. Since tags are nested in other tags, they are arranged in a hierarchical manner, and that hierarchy can be represented as a graph.
These colours represent the dots:
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
Play around with the applet and get a fresh view of websites. I graphed all the index pages on my various sites and am amazed at how different they all appear. I can see at a glance which of my blogs has a calendar on the front page.
Leave a comment