If you want to define your document structure with the new header, footer, nav, aside, section, and article elements.
Examine your content and document structure to determine which of the new elementswork with your page:
Is used to contain the headline(s) for a page and/or section. It can also contain supplemental information such as logos and navigational aids.
Contains information about a page and/or section, such as who wrote it, links to related information, and copyright statements.
Contains the major navigation links for a page and, while not a requirement, is often contained by header.
Contains information that is related to the surrounding content but also exists independently, such as a sidebar or pull-quotes.
Is the most generic of the new structural elements, containing content that can be grouped thematically or is related.
Is used for self-contained content that could be consumed independently of the page as a whole, such as a blog entry.
A simple blog structure, with a headline, navigation, a sidebar, blog posts, and a footer,
could be marked up in HTML5 as:
<h1><abbr title="Hypertext Markup Language">HTML</abbr>5, for Fun &
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't mean
that <em>all</em> links on a site need <code>nav</code>.</p>
<h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what
works best for you. So once you have the <code>DOCTYPE</code> in place, you
<p>Feed your HTML5 fix with resources from our partners:</p>
<li><a href="http://lovinghtml5.com">Loving HTML5</a></li>
<li><a href="http://semanticsally.com">Semantic Sally</a></li>
<p>Copyright © 2011 <a href="http://html5funprofit.com">HTM5, for Fun
& Profit</a>. All rights reserved.</p>
And, with the right CSS and supporting HTML, this markup could render on the
browser as shown in Figure
Figure. Sample rendering of a simple blog structure using HTML5’s new elements