O que são elementos semânticos em HTML e para que servem?

Os elementos semânticos em HTML são tags (<header>, <nav>, <article>, <aside>, <footer>, <section>, <main>, <figure>, <figcaption>, <time>, <mark>, <summary>, <details>) que descrevem a finalidade semântica do conteúdo que envolvem, não apenas sua aparência.

Objetivo principal:

• Acessibilidade: Ajudam as tecnologias assistivas (leitores de tela) a entender a estrutura e o conteúdo da página, tornando o conteúdo acessível para utilizadores com limitações.
• SEO (Otimização para Motores de Busca): Os motores de busca indexam e classificam melhor páginas com marcação semântica, pois podem determinar com maior precisão o conteúdo principal e sua relevância para as consultas.
• Desenvolvimento e manutenção: Melhoram a legibilidade e a manutenção do código, tornando a estrutura da página mais compreensível para outros desenvolvedores (e para si no futuro).
• Melhor compreensão da estrutura: Permitem dividir claramente os blocos lógicos da página (navegação, conteúdo principal, rodapé, etc.).

Exemplo de marcação não semântica:

<div>
  <h2>Título do artigo</h2>
  <p>Conteúdo do artigo...</p>
</div>
<div>
  <h3>Barra lateral</h3>
  <p>Informação da barra lateral...</p>
</div>

Exemplo de marcação semântica:

<article>
  <h2>Título do artigo</h2>
  <p>Conteúdo do artigo...</p>
</article>
<aside>
  <h3>Barra lateral</h3>
  <p>Informação da barra lateral...</p>
</aside>

O uso de elementos semânticos contribui para criar páginas web mais estruturadas, acessíveis e otimizadas para motores de busca.