Erros que iniciantes cometem ao usar semântica HTML

Mesmo parecendo apenas um detalhe técnico, a semântica HTML é o que dá significado real a cada parte da sua página. Ela orienta navegadores, mecanismos de busca e tecnologias assistivas a entenderem a estrutura do conteúdo — e isso influencia diretamente acessibilidade, SEO, leitura por crawlers, interpretação de contexto e até a experiência de quem desenvolve e mantém o projeto.

Quando a semântica é ignorada, surgem problemas invisíveis no início, mas devastadores ao longo do tempo. Muitos iniciantes acabam criando verdadeiras "sopas de div," misturam headings fora de ordem, deixam de usar tags fundamentais como main, nav, article e section, ou então utilizam essas mesmas tags apenas para fins visuais — sem considerar sua função estrutural. Isso gera páginas confusas tanto para usuários quanto para ferramentas de rastreamento, reduz a qualidade de indexação e compromete a acessibilidade.

Além disso, elementos como listas, tabelas e figuras são frequentemente ignorados ou usados de forma inadequada, o que prejudica clareza, dificulta a compreensão do conteúdo e elimina oportunidades de construir blocos com significado semântico forte. Pequenas escolhas erradas acumulam impacto até que a página inteira se torne difícil de navegar, difícil de manter e mal avaliada por buscadores.

Neste artigo, você vai aprender — de forma simples, direta e sem complicação — quais são os erros mais comuns cometidos por quem está começando e como corrigi-los com semântica moderna, consciente e estratégica. Vamos analisar cada falha em detalhes e mostrar como transformar páginas frágeis e confusas em estruturas limpas, claras e bem organizadas.

❌ 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">