Erros que iniciantes cometem ao usar semântica HTML

Apesar de parecer apenas um detalhe técnico, a semântica HTML define o verdadeiro significado de cada parte da sua página. Ela ajuda o navegador, o Google e tecnologias assistivas a entenderem o conteúdo — e isso afeta diretamente acessibilidade, SEO e até a manutenção do código.

O problema é que iniciantes acabam repetindo padrões confusos, usando divs para tudo e ignorando tags essenciais. Isso gera páginas desestruturadas, difíceis de navegar e mal avaliadas por mecanismos de busca.

Neste artigo, você vai aprender de forma clara os erros mais comuns e como corrigi-los com semântica moderna e consciente.

❌ 1. Usar div para tudo (divsoup)

Um dos erros mais conhecidos: transformar a página inteira em uma sopa de<div>. O código até funciona, mas perde completamente o significado.

<!-- ERRADO -->
<div>
  <div>
    <div>Meu título</div>
  </div>
</div>

<!-- CORRETO -->
<header>
  <h1>Meu título</h1>
</header>

❌ 2. Usar heading tags fora de ordem (pular de h1 para h4)

Headings criam a hierarquia lógica da página. Quando você “pula níveis”, leitores de tela e motores de busca interpretam que o conteúdo está quebrado.

<h1>Título principal</h1>
<h4>Subseção importante</h4>

<h1>Título principal</h1>
<h2>Subseção importante</h2>

❌ 3. Ignorar tags essenciais como main, nav, article, section

Essas tags não servem apenas para organização visual, mas para declarar o papel de cada bloco dentro da página. É o mapa que o Google usa para entender o contexto.

<!-- CERTO -->
<main>
  <article>
    <h1>Guia completo de semântica HTML</h1>
  </article>
</main>

❌ 4. Usar section apenas para "dividir visualmente"

Section não é uma “div estilizada”. Ela precisa ter um propósito claro, geralmente iniciado por um heading representando o conteúdo daquele bloco.

<!-- ERRADO -->
<section class="mb-10">
  <div>Texto aleatório sem título</div>
</section>

<!-- CERTO -->
<section>
  <h2>Sobre o projeto</h2>
  <p>Esse bloco tem significado real.</p>
</section>

❌ 5. Não usar corretamente listas, tabelas e figuras

Muita gente usa listas apenas para criar indentação, tabelas para layout ou imagens sem texto alternativo.

• Listas servem para itens relacionados.
• Tabelas estruturam dados tabulares.
• Imagens sem alt prejudicam acessibilidade.

<!-- ERRADO -->
<img src="/banner.png">

<!-- CORRETO -->
<img src="/banner.png" alt="Banner promocional do evento XPTO">