Como utilizar o elemento semântico section

No post de hoje veremos  a importância do elemento semântico section, quando utilizá-lo e também boas práticas de HTML semântico e SEO.

Como utilizar o elemento semântico section?

O primeiro aspecto de section é dar semântica aos elementos que eram utilizados antes dele para representar seções da página, como por exemplo divs

Então grandes divs que ficavam sem muito sentido no código, apenas servindo de grandes containers para seções do site

Agora podem ter sua tag alterada para section e com isso adicionar valor semântico a nossa página web

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

A tag <section> geralmente representa uma seção genérica do código que muitas vezes contem um título

Então o correto seria identificar uma section com um cabeçalho, ou seja, com tags entre <h1> a <h6>

Queria chamar atenção a um ponto, que está documentado no MDN (link no fim do post)

Você não necessariamente deve substituir qualquer container genérico de div para uma section

E sim só as seções maiores do seu código OU que tem uma lógica/sentido específico que eram abrigadas em uma div

Vou exemplificar em duas situações, uma para cada caso:

1. Seção do blog na home de um site esta dentro de uma div: troque esta div pela tag section;
2. Cada post desta seção está em uma div: deixe o elemento div pois é uma seção genérica;

Utilizando section na prática

O elemento semântico section tem uma fácil representação na prática, diferente de alguns outros elementos do HTML5

Neste podemos simplesmente criar uma nova seção para o nosso site, por exemplo:

<section>
 <h1>Melhores produtos</h1>
 <div>
  <span>Produto 1</span>
  <p>Descrição</p>
 </div>
 <div>
  <span>Produto 2</span>
  <p>Descrição</p>
 </div>
 <div>
  <span>Produto 3</span>
  <p>Descrição</p>
 </div>
</section>

Aqui mesclamos section e div para uma melhor compreensão

A tag <section> seria para o container dos melhores produtos na nossa página, ou seja, tem um grande valor de peso ou uma importância extra para ser só uma div

Porém a exibição de produtos pode ser uma div, pois é só uma representação genérica de um box para os produtos, legal né? 😀

Conclusão

Podemos concluir que não devemos substituir toda div por uma section

Nós temos que identificar o valor que este elemento representa na página

Por exemplo:

• Uma div com um contexto para a página e que abriga uma lógica de conteúdo, deveria virar uma section;
• Uma div genérica, pode continuar como uma div;

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 

Referências: MDN