Entre as v谩rias mudan莽as que o HTML 5 traz para o desenvolvimento web, existem algumas novas tags para o c贸digo-fonte. N茫o s茫o apenas novas regras para tags antigas, mas tags聽completamente novas que n茫o existiam antes no HTML 4.01.
Entre estas novidades est茫o as tags chamadas de tags de layout. Elas servem para classificar se莽玫es de sua p谩gina Web como 谩reas de significado sem que voc锚 precise de uma <div> para defini-las. O cabe莽alho da p谩gina pode ser encapsulado dentro da tag <header> (n茫o confundir com <head>…) e sua navega莽茫o pode ser encapsulada pela tag <nav>, por exemplo.
Voc锚 provavelmente usar谩 estas tags da mesma forma que j谩 est谩 usando uma <div>para estas 谩reas, com a principal diferen莽a de que agora elas est茫o definidas para voc锚 e seu navegador, de forma que voc锚 n茫o precisa mais utilizar um <id>para identific谩-las e sistemas automatizados ser茫o capazes de entender o seu contexto.
Mas existem outras diferen莽as e vamos dar uma olhada em cada uma delas agora.
ARTICLE
<article> 茅 um indicador de uma 谩rea de conte煤do do seu site, o n煤cleo de uma determinada p谩gina, a por莽茫o mais central e relevante da p谩gina.
Antes da sua exist锚ncia, mecanismos de busca, como o Google n茫o tinham como identificar a parte mais relevante de seu conte煤do. Tanto a navega莽茫o, quanto o topo da p谩gina ou o seu miolo tinham o mesmo peso, sendo analisados de baixo para cima e sua import芒ncia determinada pela ordem de apari莽茫o no c贸digo-fonte. Com esta tag, navegadores, buscadores e outros sistemas automatizados podem identificar facilmente o conte煤do principal.
De acordo com a especifica莽茫o sem芒ntica, o elemento contido dentro de <article> est谩 pronto para ser distribu铆do ou reutilizado de forma independente, sem precisar dos demais elementos da p谩gina para ser compreendido. Pode abranger uma postagem, um artigo, um coment谩rio de usu谩rio, um gadget etc.
ASIDE
<aside> 茅 um indicador de uma 谩rea de conte煤do paralelo, complementar ao conte煤do principal em sua p谩gina.
Existe uma interpreta莽茫o equivocada das especifica莽玫es que indica seu uso para “sidebars”. N茫o 茅 o caso, o conte煤do contido nesta tag 茅 “lateral” no sentido figurado, n茫o no sentido estrito da palavra, uma vez que, assim como as outras tags de layout, ela n茫o guarda em si nenhuma instru莽茫o de posicionamento para o navegador.
O elemento contido dentro de <aside> funciona como uma nota, um adendo, um esclarecimento ao conte煤do que a cerca. Sua formata莽茫o fica ao crit茅rio do designer respons谩vel e do CSS implementado.
FIGURE
<figure> 茅 um indicador de uma 谩rea de conte煤do gr谩fico dentro da p谩gina, seja uma foto, uma ilustra莽茫o, um gr谩fico, um diagrama. A tag tamb茅m pode ser utilizada para especificar fragmentos de c贸digo-fonte.
Na pr谩tica, funciona como um container para <img> e <code>. A tag introduz um candidato a substituto para o antigo <legend>: o <figcaption>.
A fun莽茫o do <figcaption> 茅 marcar um cabe莽alho ou legenda para um ou mais elementos inseridos dentro de <figure>.
FOOTER
<footer> 茅 um indicador de uma 谩rea de conte煤do que vem ao final de um conte煤do, popularmente chamado de “rodap茅”.
Semanticamente, de acordo com as especifica莽玫es seu uso n茫o se restringe ao rodap茅 da p谩gina, mas pode ser aplicado ao final de uma se莽茫o ou 谩rea. Dentro deste elemento costumam vir informa莽玫es como autor, contato, copyright, documentos relacionados etc.
HEADER
<header> 茅 um indicador de uma 谩rea de conte煤do que vem no come莽o de um conte煤do, popularmente chamado de “cabe莽alho”.
Semanticamente, de acordo com as especifica莽玫es, seu uso n茫o se restringe ao topo do documento, mas pode ser aplicado ao in铆cio de uma se莽茫o ou 谩rea. Dentro deste elemento costumam vir informa莽玫es introdut贸rias e navega莽茫o.
Embora a interpreta莽茫o das tags聽<header> e <footer> pelos navegadores n茫o atribua qualquer posicionamento visual no layout da p谩gina, a regra de bom uso determina que o primeiro apare莽a antes do conte煤do principal e o segundo venha ap贸s o conte煤do principal.
NAV
<nav> 茅 um indicador de uma 谩rea na p谩gina que cont茅m majoritariamente links de navega莽茫o.
Nem todos os links de um documento precisam estar contidos dentro deste elemento, apenas aquelas 谩reas popularmente conhecidas como “menu” ou listas de links.
Semanticamente, sistemas automatizados como navegadores, mecanismos de busca ou leitores de tela n茫o tinham como diferenciar links de navega莽茫o de conte煤do propriamente dito. Com a implementa莽茫o da tag <nav>, por exemplo, leitores de tela podem pular inicialmente este tipo de 谩rea no site para usu谩rios com defici锚ncias.
SECTION
<section> 茅 um indicador de se莽茫o, cap铆tulo, divis茫o de um determinado cap铆tulo, cujo conte煤do est谩 agrupado pelo mesmo tema.
A princ铆pio, esta 茅 a tag que causa mais confus茫o entre os usu谩rios. Mas n茫o deveria. Semanticamente, ela define uma se莽茫o gen茅rica do conte煤do, como o pr贸prio nome sugere. Se聽<article> 茅 o grande agrupador de conte煤do, <section>聽s茫o os lugares onde antes voc锚 aplicaria um <h2>, <h3>, <h4> etc.
Somando-se a introdu莽茫o e as defini莽玫es de cada tag de layout do HTML 5, este artigo que voc锚 est谩 lendo, por exemplo, poderia ser dividido facilmente em 8 <section> diferentes.
Entretanto, n茫o se deve confundir <section> com <div>. O primeiro agrupa conte煤do que compartilha o mesmo tema. O segundo representa uma ruptura gen茅rica no fluxo da p谩gina. Em bom portugu锚s, toda se莽茫o 茅 uma divis茫o do conte煤do, mas nem toda divis茫o chega a formar uma se莽茫o.
Clique e veja tamb茅m nosso artigo Estrutura b谩sica de uma p谩gina HTML5.