Preview of HTML 5

New elements - article, aside, audio, canvas, command, details, datalist, dialog, embed, figure, footer, header, hgroup, keygen, mark, meter, nav, progress, output, rp, rt, ruby, section, source, time, video

Structure

<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>

Section

A section is a way of grouping content items that have some relevance to each other. Typically a section tag will be preceeded by a header and followed by a footer. For example a section may group together three articles on a page that are all about HTML5. Sectiona may be nested and can hold any other type of mark-up such as paragraphs, quotes, h tags etc.

<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>

<section>
<h1>Chapter 1: The Period</h1>
<p>Pellentesque congue feugiat vestibulum. Maecenas vitae nibh nulla, sed ornare eros...</p>
</section>

Header

The header tag indicates the header of a section and is typically a headline. However, it may contain more information than you might put in say an h1 tag. For example; sub headings, version numbers or bylines.

<header>
<h1>Preview of HTML 5</h1>
<p class=line>By Lachlan Hunt</p>
</header>

<header>
<h1>Example</h1>
<h2>Insert tag line here.</h2>
</header>

Nav

For navigation elements. In most cases this will contain a styled, unordered list but it may hold flash or javascript driven navigation.

<nav>
<ul>
<li><a href=home>Home</a></li>
<li><a href=products>Products</a></li>
<li><a href=services>Services</a></li>
<li><a href=about>About</a></li>
</ul>
</nav>

Aside

Used to replace the traditional sidebar, an aside is not directly linked to the main content of the page and may well remain consistent throughout a website. This might include links, site sponsors, tweets or other sidebar type site content.

<aside>
<h1>Archives</h1>
<ul>
<li><a href=2010/09>September 2010</a></li>
<li><a href=2010/08>August 2010</a></li>
<li><a href=2010/07>July 2010</a></li>
</ul>
</aside>

Article

An independant entry in a blog or other website.

<article id=comment-2>
<header>
<h4><a href=#comment-2 rel=bookmark>Comment #2</a>
by <a href=http://example.com/>Maecenas vitae</a></h4>
<p><time datetime=2010-09-10T13:47Z>September 10th, 2010 at 05:37</time>
</header>
<p>Pellentesque congue feugiat vestibulum.</p>
</article>

Footer

The place to put your website, business, copyright information and soon.

<footer>
<ul>
<li>copyright</li>
<li>sitemap</li>
<li>contact</li>
<li>to top</li>
</ul>
</footer>