Erros comuns no HTML e como evitá-los

Conheça os erros mais frequentes de quem está aprendendo e saiba como identificá-los e corrigi-los.

Mesmo com todas as boas práticas, é natural cometer erros, especialmente quando estamos aprendendo. O importante é saber identificar esses erros e, mais importante, como evitá-los. Nesta lição, vamos explorar alguns dos erros mais comuns que iniciantes (e até experientes!) cometem ao escrever HTML e como você pode se prevenir.

1. Tags Não Fechadas ou Fechadas Incorretamente

Este é, talvez, o erro mais comum e pode causar os problemas mais estranhos na renderização da sua página.

  • O erro: Esquecer de fechar uma tag (ex: <p>Olá) ou fechar na ordem errada (ex: <b><i>Texto</b></i>).
  • Problemas que causa: Layouts quebrados, elementos se comportando de forma inesperada, estilos CSS não aplicados corretamente, conteúdo "vazando" para fora de seu contêiner.
  • Como evitar:
    • Sempre feche suas tags. Use um editor de código que automaticamente fecha as tags para você (VS Code, Sublime Text).
    • Preste atenção à ordem de aninhamento: a última tag aberta deve ser a primeira a ser fechada (como parênteses: ( [ { } ] )).
    • Use um validador HTML (veremos na próxima lição!).

2. Atributo alt Ausente ou Inadequado em Imagens

Já falamos muito sobre o alt, mas a falta ou o uso incorreto dele é um erro persistente.

  • O erro: Omitir o atributo alt completamente ou usar descrições genéricas/inúteis (ex: alt="imagem").
  • Problemas que causa: Inacessibilidade para usuários com deficiência visual, prejuízo ao SEO, má experiência quando a imagem não carrega.
  • Como evitar:
    • Sempre inclua alt em todas as tags <img>.
    • Pense na função da imagem e no contexto para escrever uma descrição concisa e relevante.
    • Use alt="" para imagens puramente decorativas.

3. Falta de Associação entre <label> e Campos de Formulário

Formulários são críticos para a interação, e a acessibilidade deles depende muito dos rótulos.

  • O erro: Deixar um campo de formulário sem um <label> associado ou associá-lo incorretamente.
  • Problemas que causa: Inacessibilidade para leitores de tela, dificuldade de uso para usuários com deficiência motora (área de clique menor), má usabilidade geral.
  • Como evitar:
    • Sempre use a tag <label> para cada campo de formulário.
    • Associe o <label> ao campo usando for="id-do-campo" e id="id-do-campo".

4. Uso Incorreto da Hierarquia de Títulos (<h1> a <h6>)

A estrutura de títulos é um mapa para o conteúdo da sua página.

  • O erro: Usar <h1> mais de uma vez, pular níveis de título (ex: <h1> direto para <h3>), ou usar títulos para estilização.
  • Problemas que causa: Dificuldade de navegação para leitores de tela, prejuízo ao SEO, má organização lógica do conteúdo.
  • Como evitar:
    • Apenas um <h1> por página (o título principal).
    • Siga a ordem hierárquica (<h1> -> <h2> -> <h3>...).
    • Use CSS para estilizar o texto; use títulos para semântica.

5. Misturar Estilos e Scripts Inline no HTML

Embora funcione, é uma prática que dificulta a manutenção.

  • O erro: Colocar CSS diretamente no atributo style de um elemento ou JavaScript dentro de onclick="...".
  • Problemas que causa: Código bagunçado, difícil de ler e manter, estilos e comportamentos não reutilizáveis, dificuldade de depuração.
  • Como evitar:
    • Mantenha CSS em arquivos .css externos.
    • Mantenha JavaScript em arquivos .js externos.
    • Use classes e IDs para aplicar estilos e comportamentos.

6. Falta da Estrutura Básica do Documento HTML

Esquecer elementos essenciais do cabeçalho.

  • O erro: Omitir <!DOCTYPE html>, <html>, <head>, <body>, <meta charset="UTF-8">, <meta name="viewport"> ou <title>.
  • Problemas que causa: Modo de compatibilidade (quirks mode) no navegador, problemas de renderização em diferentes dispositivos, caracteres especiais exibidos incorretamente, falta de título na aba.
  • Como evitar:
    • Sempre comece com o boilerplate (estrutura básica) completo.
    • Use o atributo lang na tag <html>.

7. Usar <div> e <span> para Tudo (Falta de Semântica)

O HTML oferece tags com significado; use-as!

  • O erro: Construir toda a estrutura da página usando apenas <div>s e <span>s, sem usar tags semânticas como <nav>, <main>, <article>, <section>, <footer>, etc.
  • Problemas que causa: Inacessibilidade (leitores de tela não conseguem entender a estrutura), prejuízo ao SEO, código menos legível e compreensível.
  • Como evitar:
    • Pense no significado do conteúdo e escolha a tag HTML mais apropriada.
    • Use <div> e <span> apenas quando não houver uma tag semântica mais específica e para fins de agrupamento ou estilização.

8. Não Testar a Acessibilidade e a Responsividade

Assumir que o site funciona bem para todos.

  • O erro: Não verificar como o site se comporta em diferentes tamanhos de tela, com navegação por teclado ou com um leitor de tela.
  • Problemas que causa: Exclui usuários, má experiência em dispositivos móveis, problemas de layout em telas menores.
  • Como evitar:
    • Sempre teste seu site em diferentes navegadores e tamanhos de tela.
    • Navegue usando apenas o teclado (Tab, Shift+Tab, Enter).
    • Use um leitor de tela (ex: NVDA, VoiceOver) para testar a experiência.

Resumindo

Evitar esses erros comuns é um passo gigante para escrever um HTML de alta qualidade. A prática leva à perfeição, e o uso de ferramentas de validação e teste será seu melhor amigo nessa jornada.