Layout usando grouping tags!!!

Tags de agrupamento semântico

Até agora para criar uma box-level usamos a tag div e para criar caixas inline-level usamos a tag span. Na versão 4 do HTML essas duas tags eram usadas para criar o layout do documento. Embora ainda seja possível usar div's e span's, no HTML5 podemos usar tags de agrupamento semânticos.

De maneira geral, todo site possui: cabeçalho, corpo principal e rodapé, com um menu de navegação sendo bastante comum também. As seguintes tags podem ser usadas como divs semânticas, que indicam a estrutura da página:

  • header: Funciona como uma div mas já indica que a seção é de cabeçalho;
  • main: Funciona como uma div e indica que é a parte principal do site;
  • footer: Funciona como uma div e indica que é a parte de rodapé;
  • nav: Indica que é a seção de navegação;
  • section: Tag usada para indicar que é uma seção;
  • article: Tag usada para indicar um artigo;
  • aside: Conteúdo periférico ao artigo;