This is really cool.....DIV tag is nearly obsolute.
Here we have some brand new elements:
<header>: Denotes the header of a section of the page, whether it is the whole page itself, or just a small subsection of it<time>: Allows you to specify a date/time of publication for the page<article>: Specifies a subsection of the main page , grouping related content together, such as a header, images, and paragraphs of text<section>: Specifies a subsection of an article<aside>: Allows you to define a paragraph as an aside, containing supporting information not critical to the main body of text<figure>: Specifies an illustrative figure to go along with the text content of your page. This usually groups together an image (or other media) with a caption and/or author attribution<footer>: Defines a footer for your page, which can contain any information you deem appropriate
eg:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
header, article, section, figure, aside, footer { display: block; }
time { display: inline;}
This solution seems like a good one, but it is not perfect, so you need to go a bit further if you want to achieve support in older browsers. The problem is that some browsers (such as Firefox 2, Camino 1, and all versions of Internet Explorer) don’t see the HTML 5 elements as unrecognised; they don’t see them at all! So text marked up with an HTML 5 element can’t be styled at all in these browsers, because the elements don’t exist in their eyes. There is a workaround for this, and it is explained in the HTML 5 doctor article How to get HTML5 working in IE and Firefox 2.
Another thing to notice is that all the headings in the document are <h1> elements. You might think this is bad practice – normally it is, but in this example David is trying to emulate how headings work in the HTML 5 spec, where all headings are <h1>s, and the heading levels are determined by their position in the structural hierarchy.
