O primeiro ponto é que o documento é composto por seções, independente da função designada ao elemento que a define. Existe um elemento de seção genérica, mas tudo na estrutura podemos chamar de seção.
Estes são os elementos novos que prometem organizar melhor o documento:
Estes são os elementos novos que prometem organizar melhor o documento:
- section: indica uma seção genérica da aplicação ou do documento, que juntamente com os títulos [h1], [h2]...[h6], servem para indicar a estrutura da informação ou conjunto relacionado. Esse cara substituiria a tag [div] de uso genérico;
- article: indica um pedaço de conteúdo do documento, como um post de um blog ou uma notícia de um jornal (por exemplo: tenho uma seção de notícias e dentro dela vários artigo);
- aside: contem itens referentes à página ou ao conteúdo focal - a barra lateral com os links, banners etc;
- nav: contem os itens de navegação do documento - aquela barra, normalmente superior, com os links;
- hgroup: é o agrupamento de itens do cabeçalho de uma seção;
- header: é o cabeçalho de uma seção contendo os títulos e ajudas à navegação ou à introdução de uma seção (documento, seção ou artigo) que podem ser agrupados pelo [hgroup];
- footer: é o rodapé da seção (documento, seção ou artigo), para que se coloque dados do autor, data de publicação etc;
- figure: representa o agrupamento de itens que necessitem de um título, como imagens, vídeos ou até textos... e seu título, claro;
- figcaption: o título do agrupamento do [figure];
A idéia é que ao invés de ficar usando um monte de [div] com a "semanticalização" destes blocos embutida nos atributos 'class' ou 'id', houvessem elementos nativos que representassem estes blocos ou seções do documento.
Obviamente um [header] não vai conter um [header], assim como um [footer], [nav], [aside] etc. Acredito que somente o [section] pode conter um [section].
O HTML5 promete simplificar a estrutura do documento, fazendo dela auto-explicativa e direta.
Exemplo de uma página HTML5, visando a estrutura:
<!doctype html>
<html lang="pt">
<head>
<title>Titulo</title>
</head>
<body>
<header>
<h1>Titulo, Logo etc</h1>
</header>
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<section>
<article id="artigo2">
<header>
<h2>Artigo 2 do Blog</h2>
<p>Publicado em <time datetime="2010-03-11T16:22:45-03:00">11/03/2010</time></p>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
</section>
<footer>
<p><a href="#">3 cometarios</a><p>
</footer>
</article>
<article id="artigo1">
<header>
<h2>Artigo 1 do Blog</h2>
<p>Publicado em <time datetime="2010-03-08T20:15:29-03:00">08/03/2010</time></p>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
</section>
<footer>
<p><a href="#">3 cometarios</a><p>
</footer>
</article>
</section>
<aside>
<header>
<h1>Minha Barra Lateral</h1>
</header>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
<footer>
<p>5 pessoas online<p>
</footer>
</aside>
<footer>
<p>Produzido por <a href="#">Fulano</a></p>
<p><small>Copyleft...</small></p>
</footer>
</body>
</html>
