E ser cheio de significados é ser semântico!

Ao escrever a interface de usuário, o elemento HTML mais utilizado (graças a popularização dos Web Standards) é o <div>, uma espécie de Bombril® do desenvolvimento web. Utilizamo-los para posicionar nossos blocos de elementos visuais e textuais na página utilizando ids e classes. Vejamos o seguinte exemplo:

1
2
3
4
5
6
7
8

<div id="wrapper">
	<div id="header" class="grid_24">
		<h1>Titulo do nosso site ou artigo</h1>
	</div>
	<div id="article" class="grid_24">
		<p>O texto do seu artigo ou a home do seu site</p>
	</div>
</div>

Essa marcação é largamente utilizada nos websites e é perfeitamente válida! Acontece que semanticamente, o <div> não possui qualquer significado. Não pode identificar um artigo ou um header/footer.  E foi também pensando nisso que a especificação do HTML5 prevê novas tags, com a mesma característica de blocos de conteúdo, porém, com mais significado:

1
2
3
4
5
6
7

<header></header>
<footer></footer>
<aside></aside>
<article></article>
<section></section>
<figure></figure>
<nav></nav>

Simples e objetivo, como quase tudo no HTML. Não trazem 3D para o browser nem video ou áudio, mas possuem um papel fundamental no seu site/app: informam aos buscadores do que se trata o conteúdo envolvido por aquela tag. E vai me dizer que SEO não é o Santo Graal do desenvolvimento web?

Vejamos o exemplo acima, reescrito utilizando as novas tags do HTML5:

1
2
3
4
5
6
7
8

<div id="wrapper">
	<header class="grid_24">
		<h1>Titulo do nosso site ou artigo</h1>
	</header>
	<article class="grid_24">
		<p>O texto do seu artigo ou a home do seu site</p>
	</article>
</div>

Pode até parecer bastante óbvio o significado das novas tags, mas tente, sem qualquer pesquisa, pensar em quando usar <aside> ou <figure>. Pois é: não é tão óbvio assim, pelo menos para mim. Assim, pesquisando motivado pela histeria coletiva acerca do HTML5, descobri diversas fontes interessantes e no http://html5doctor.com, encontrei um chart que explica bem quando utilizar cada um dos novos elementos:

Clique para ver o post relacionado

Apesar de toda a gritaria dos últimos meses, o HTML5 nada mais é do que a simples evolução do HTML4, com mais recursos e mais material para estudar!

Mãos à obra!