Desenvolvimento HTML

Como utilizar o elemento semântico section

6 de setembro de 2019

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.

elemento semantico section capa

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

0

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Deixe um comentário

avatar
  Subscribe  
Notify of