Css Globe

This article is analysis of a markup structure of digg's homepage and an attempt to improve it. First of all, I wish to point out that Digg's markup and semantics are not badly done. I just wanted to take a well known site as an example and make improvements on certain elements to demonstrate even better ways of applying standards.
For the purpose of this article I have removed all javascript actions and advertising elements from the digg's homepage.

Analysis

The simplest (and best) way to evaluate site's markup structure is removing all styles and seeing the site "naked". If what you see makes sense, then it is structured well. There needs to be a logical "flow" of the content. The sections should be ordered by their significance, proper use of heading tags determines the hierarchy of sections and choice of html elements applied should fit the type of content that we're presenting.
If you take a look at the digg's homepage without styles you will notice that most of it is done well but you will also notice few things that could be improved.

Sections

Many sites consists of header, body with few columns and a footer. We can call that content sections. The most important section should be as near to the top of the page as possible. Since the header with site navigation usually comes at the very top all we can talk about is organizing the structure of the body area. On most sites "About" and similar texts are considered important. They are placed at the beginning of the page because they tell visitors (and Google) what the site is all about. But in digg's case my opinion is that news are far more important than intro text. So I would definitely put main column before the side column putting the fresh digg news in focus.

Logical Flow

As mentioned earlier, logical flow is a crucial element of well organized markup structure. Largest error I can see on this site is the relation between main title "All News" and actual all news items. Between those two you can find entire side column and several navigation elements, making it clear that this was a presentation related compromise.

Choice of html elements

Most section elements of the digg's homepage are presented with usual and standard html tags for the type of content. The one place where I would definitely take a different road then digg creators are the news lists. Using unordered list for both main and side news list would decrease a number of divs used and it would define content for what it is: a list.

Classes

Very often we can find a situation where developers use div with class="side" and a child div with class="side-content". Using descendant selectors we can have cleaner markup and avoid inventing class names.

So instead of

we can have

and select it in css with

We can use class .container in the main div

Examples

Other than elements mentioned in this post, there is a number of small stuff that I changed on my example but I must point out that I haven't made a complete recode. Every developer has his/her own style in coding and I am sure we would all find a thing or two to change to match our preferences.

• Original digg homepage without css
• Changed version of digg homepage without css
• Changed version of digg homepage with css

Changelog

At the end, for those of you who wish to analyze, here's a list of changes applied to original code

• .main and .sidebar - moved sidebar after main in the markup structure. Both containers have float left with variable sizes. I used paging navigation as an element that clears the floats.
• main title - placed title "All News" right before the news list and used position:absolute to get it above the sub navigation.
• #headerPrimary - used line-height property instead of paddings to define height of the menu. Moved link "sumbit new story" outside of the list.
• .side-header - created a div with class name .side and put both login links and search form in it.
• .sub-menu - instead of having it all in one line I have used unordered list. Removed class names and targeted elements with descendant selectors.
• #login-form - used fieldset instead of div. This demands further styling though...
• #announce-invite - instead of 2 nested divs I have used a paragraph with nested span that I made a block level element with display:block
• #probdrop - instead of having one item list I put this into paragraph.
• news lists - created unordered lists with class name .news in both main and side column.