I've created node maps of various pages using aharef's dom visualizer applet.

The results are really interesting to share.

Let me start with sarmal.com. Here is how the site currently looks like:



and here follows the corresponding node graph for it:


What do all those colors mean?

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

...

When I first saw it I was surprised how such a complicated-looking site has this simple node structure. It's obviously because the site's layout is CSS-based.

We'll examine the node graph deeper but just to reassure I'll show the node structure of a table-based site with equal visual complexity (I cannot give the URL because the site owner is my client)

Here is the node structure ot that site:



As you can see the structure is way too much complicated. The red nodes in the middle are for three nested tables. Other red nodes located on the main trunks are various placeholding TR and TD elements.

The upper right corner is another nested table group, nested within the master table (the master table actually consists of three tables nested inside each other)

In addition we see a heavy use of images to make the site look pretty (which can better be done using css backgrounds -- the purples nodes represent images)

Let us split our original graph to regions:



Region 4 is the main content (page body describing what "sarmal" is in Turkish)
Region 7 is the header part and Region 5 is the footer part

It's really nice to observe how divs (the green nodes) group content together.

Region 3 is the head part of the HTML.

Region 8 (the dotted one) is the side link container (on the left). You can see links grouped using unordered lists (Region 1 and Region 2 as two examples, there are three other)
imho the best technique for creating a semantic navigation is using unordered lists.

Finally Region 6, an unordered list grouping six paragraphs, is also inside the main body. Thus the main body of the page can be visualized as a trunk starting from region 4 ang going all the way to region 6. While the leaves (which are regions 5, 7, and 8) are header, footer and side navigation respectively.

It may not be the best semantic design in the world. But having seen all these I'm enchanted with the beauty of its structure.

...

The second site we'll observe is sardalya.

Here is how the site looks:



And its corresponding node structure:


...

Finally let us observe this blog:


Looking at the graph, you can easily see how content is centered around container divs (the page is an archive page which contains 5 blog posts, it is nice seeing how those five posts -- the clouds that are centered around green dots -- i.e. divs -- are grouped together)

And if we just click the permalink of a single post, its node structure would be:




Its amazing!
...or at least I think so.

 bu yaziyi sevdin mi?  hemen una ekle!