O HTML 5 já é uma realidade na web, e confesso que se tornou bem antes do que eu imaginava.
Mas ainda é um mistério para muitos webdesigners e programadores. O pior é que  muitos ainda não sabem usar corretamente as novas tags e por isso não raro esse sites acabam tendo um péssimo desempenho nos mecanismos de busca.
Nessa série de artigos HTML 5 Profissa pretendo dar uma breve explicação sobre as tags mais comuns e aonde o povo está fazendo errado e como o povo pode fazer certo.

Section

O que diz a especificação oficial sobre o elemento section :

“O elemento section representa uma seção de um documento. O elemento section não é um elemento de container genérico. Quando for necessário um elemento somente para fins de aplicação de estilos CSS ou como conveniência para um script, programadores são incentivados a usar o elemento div.”

 

Jeito Errado

O que muitos estão fazendo é usando o elemento section para demarcar um conteúdo afim de aplicar estilos CSS nele, ou somente para demarcar o conteúdo principal dos elementos nav, header, footer, etc. Este trabalho é para o elemento div, não section.

No exemplo acima o elemento section está sendo usado somente como um contâiner de um bloco nav,  no caso um menu de navegação.  O elemento section NÃO serve pra esse tipo de coisa. O elemento div nesse caso seria o correto de se usar.

 

Jeito Certo

Uma regra geral é que o elemento section é apropriado somente se o conteúdo do elemento pudesse ser guardado como um registro num banco de dados, tamanha a sua importância. Dentro do elemento section temos um heading, um pedaço de conteúdo relevante para a página, que poderia muito bem ser retirado e listado como resultado num mecanismo de busca.

Geralmente usamos o elemento section como no exemplo acima. Note que o heading vai dentro do section, não fora dele.

Com algumas pouquíssimas excessões, o elemento section não deve ser usado se não existir naturalmente um heading (h1-h6) dentro dele.

Section vs Article

Vale a pena ressaltar que existe uma confusão entre os elementos Section e Article. Article, pra quem não sabe, é um novo elemento HTML 5 também utilizado para seccionar conteúdo de uma página. A grande diferença entre section e article está no tipo de conteúdo.

Você vai usar o elemento article ao invés do section quando o conteúdo do elemento tiver propriedades autorais. Por exemplo, você usaria article como contâiner de um post de um fórum, um trecho de uma revista, uma entrada de um blog, artigo de um jornal, um comentário enviado por um usuário, ou qualquer outro tipo de conteúdo que possa ser considerado independente do site.

Veja um exemplo enfatizando a diferença dos dois elementos:

 

Acho que deu pra perceber a diferença neh? O primeiro exemplo com section é um tipo de conteúdo de certa forma genérico e totalmente dependente do conteúdo geral do site. Já o segundo exemplo com article vemos um conteúdo com propriedade autoral, que poderia ser compartilhado sem perder o sentido, e é totalmente independente do conteúdo do site em si. O segundo bloco de código com article poderia muito bem ser retirado do site e escrito num pedaço de papel que ele teria o mesmíssimo sentido mesmo que você não soubesse o site de origem.

Resumindo

Segue algumas dicas que podem te guiar em 99% dos casos (claro, sempre existirão exceções):

  1. Não use section somente como um gancho para um usar um script ou aplicar um estilo CSS; isso é coisa das DIVs
  2. Não use se article, aside ou nav for mais apropriado
  3. Não use a menos que haja um heading naturalmente no início do conteúdo
  4. Autores são encorajados a usar o elemento article ao invés do section quando faria sentido compartilhar o conteúdo ou trazê-lo de fontes externas. Como geralmente posts de blog são compartilháveis e muitas vezes extraídos de fontes externas (twitter, reddit, etc), article é o candidato mais apropriado para a função.

Lembre-se: O HTML 5 surgiu para trazer “significado” (semântica) para os elementos de uma página, para que mecanismos de busca e outros serviços possam entender e compreender melhor o conteúdo de um site. Usar os elementos errados nos locais errados não vai atrapalhar a visualização do usuário humano, mas buscadores como o Google, Yahoo ou Bing podem fazer uma verdadeira bagunça na hora de indexar o seu site.

Fabio Ferreira on EmailFabio Ferreira on InstagramFabio Ferreira on Twitter
Fabio Ferreira

Desenvolvedor Javascript e PHP, é editor do blog Café na Veia e também atua como desenvolvedor web freelancer na cidade de São Paulo.


Author: Fabio Ferreira

Desenvolvedor Javascript e PHP, é editor do blog Café na Veia e também atua como desenvolvedor web freelancer na cidade de São Paulo.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Instagram did not return any images.

Siga também nosso Instagram!