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!
