If you haven’t written any HTML from scratch, you may not be aware that a webpage has a treelike structure. The text and images of a page are encased in a <body> tag; the body itself may be divided into several <div> elements; each may contain many <p> (paragraph) elements and/or <img> (image), <table> (table) or <ul> (bullet list) elements. A paragraph will often contain links (<a>), italics (<i>) or other modifiers. Each element is contained in a higher-level element, up to the entire page.
So the “Webpages as Graphics” applet renders a webpage as a tree. Here’s mine:
OK, so what is this? The big cluster at bottom left is the series of posts on the front page of the blog. Each post is a little cluster rooted on a div tag, with a varying number of orange p tags inside. Every post has at least one blue link, but most have several. There are few pictures. There is one small stem jutting toward the upper right that has a picture, that’s the footer of the page.
The looser cluster at the upper right includes the right and left sidebars. The flowery structure at the extreme right is the blogroll, ordered into several lists, each with a link. The dense cluster of blue links is the tag cloud; the more diffuse pom with the gray center is the recent posts list. The purply umbel toward the left of this cluster is the Amazon zone. And the dangly vine with the yellow form tags is the search box.
So that’s it. I think it’s a nice way to look at a website and learn how it’s put together. You can see that my daily writing consists of small clusters of tags containing text. The big clusters of links are separated from the daily (and changing) content, connected only by being contained on the same page.
Try it with a few sites – the app takes a little while to optimize the spacing between links, but it’s fascinating to watch it. For an extremely simple tree, try the map of Google’s homepage. Scienceblogs is rather more complicated, with a big dandelion.