23/02/2010

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 so on.

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