Jyrki Lilja's Profile

When developing the HTML 5 spec, the editor, Ian Hickson of Google, analyzed over a billion web pages to find out how authors were actually using these elements. He discovered that in the top 20 class names used in the markup for this huge set of data were classes for common requirements: footer, header, nav, menu, content, and main.

So the HTML 5 spec has a host of new, structural tags such as header, footer, nav, article, and section, which fit these common requirements and allow us to mark up our archetypal blog with more meaningful elements, like so:

The same blog in HTML 5 (click to view image)

What’s really interesting is that we can use HTML 5 elements right now, even though the main browsers are yet to support HTML 5, because CSS allows you to style anything.

By default, CSS assumes that an element is inline. For HTML 4 elements such as DIV, the browser’s own default style sheet overrides that default, but for our HTML 5 elements, we need to do that manually. The following CSS rule does the trick:

header, footer, nav, section, article {

 display:block;

}

Then we can add style rules—floating, background colors, margins.