HTML5 structure
HTML5 has four new block-level sectioning elements that we can use to give the parts of web pages more semantic meaning. These new elements are for ‘chunks of related content’ – basically a logical section of the document:
<section>
A generic chunk of related content.
<article>
An independent, self-contained chunk of related content, that still makes sense on it’s own.
<aside>
A chunk of content that is tangentially related to the content that surrounds it, but isn’t essential to understanding that content.
<nav>
Navigation for the site or page.
These new sectioning elements should contain a <header> element with the section’s title, and any other introductory information. They can also contain one or more <footer> elements with additional information such as copyright, related links etc. It’s important to note that <header> and <footer> apply to the structural element they’re in—they’re not the same as a page header or page footer. It’s also important to remember that <header> and <footer> can’t contain other <header>s and <footer>s, and <footer> can’t contain heading or sectioning elements. Finally, while the words “header”, “footer” and “aside” all come with preconceptions, their semantic meaning comes from the types of content they contain, not from their presentation or relative placement. For example, an <aside> could contain a footnote, and a <footer> containing a ‘Top of Page’ link could appear at both the top and bottom of a section.
Read original article for a detailed demo on how to convert HTML4/XHTML to HTML5 using example structures for a basic article page
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using
Another great tutorial from Net Tuts Plus shows how to use HTML5 and CSS3 techniques to create a Demo Blog
Also read coding HTML5 form scratch
