O HTML5 vem para ser a atualização da linguagem HTML. Ela cria várias novas tags na linguagem para que o CSS e o Javascript fazerem melhor seu trabalho sem precisar da instalação de vários plugin, comprometendo o desempenho, e trazer mais semântica ao código HTML.

Embora o padrão não esteja terminado e plenamente suportado, podemos começar a utilizar alguns de seus recursos já que ele esta sendo disponibilizados em módulos. Uma das mudanças que já podemos utilizar é a estrutura da página, que foram criadas tags novas para representar semanticamente a estrutura da página.

Antigamente(HTML4/XHTML) utilizávamos a seguinte estrutura:

Estrutura HTML clássica

Para deixar mais semântica a estrutura da página foram adicionadas as tags: section, article, aside e nav, header e footer.

Estrutura HTML 5

Utilizando estas nova tags podemos criar a seguinte estrutura: 

<!DOCTYPE html>
 
<html>
 
    <head>
        <title>Exemplo de estrutura de site em HTML5</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="estilo.css">
    </head>
     
     
    <body>
        <div id="site">
            <header id="topo">
                <h1>Titulo do site</h1>
            </header>
             
            <nav id="menu">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </nav>
            <section id="conteudo">
                <header>
                    <h2>Titulo do artigo</h2>
                    <small>12/12/2012</small>
                </header>
             
                <article>
             
                </article>
                <footer>
                    Por Fulano
                </footer>
            </section>    
             
            <aside>
             
            </aside>      
            <footer>
                <a href="http://www.botecodigital.info">Boteco Digital</a>
            </footer>     
        </div>
    </body>
 
</html>

Veja o exemplo

Para começar o DOCTYPE foi bastante simplificado, bem como a metatag charset. Eu particularmente agradeço já que nunca consegui decorá-las, sempre tive que abrir um arquivo e copiar.

Vamos a uma breve descrição das novas tags.

section

A tag section define uma nova seção do site, uma área genérica do site. Por exemplo a home pode ser dividida em destaque, novidades, chamada para conteúdo completo.

header

O elemento header representa uma área de introdução. Pode ser utilizado para agrupar índices de conteúdo, campos de busca, cabeçalho do site com titulo ou logo.

footer

A tag footer representa o rodapé do site, ou de uma seção.

nav

O elemento nav é utilizado para representar uma seção da página que contém links para outras partes do site. Este elemento deve ser utilizado para grupos de links importantes do site tipicamente menus de navegação.

article

O elemento article é utilizado para representar o conteúdo do site propriamente dito, como posts, artigos e outros textos em geral.

aside

A tag aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside.

Porém vários navegadores, principalmente os mais antigos, não reconhecem devidamente as novas marcações. Para mantermos a compatibilidade é necessário estilizar algumas tags usando a seguinte regra CSS.

header , footer , article , aside , nav , section {display:block}

Para verificar o suporte a HTML5 e CSS3 podemos utilizar a Modernizr (http://www.modernizr.com/) que é uma biblioteca de detecção que lhe permite verificar o suporte da maioria das características do HTML5 e CSS3.

O Modernizr roda automaticamente assim que você o adiciona no head do documento fazendo funcionar as novas tags em navegadores mais antigos(IE8).