O que é e como usar tags de forma inteligente no desenvolvimento web
A maioria dos desenvolvedores trata tags HTML como algo automático. Você aperta Ctrl+C, cola em outro projeto e pronto. O problema é que tags mal estruturadas viram débito técnico invisível. Elas não aparecem nos erros do console, mas complicam manutenção, SEO e performance ao longo dos meses.
Tag divertidamente na prática
Quando falo de usar uma tag de forma que faça sentido no contexto do projeto, não estou falando de semantics ou acessibilidade como conceito abstrato. Estou falando da decisão prática de escolher entre um <div> com classe utilitária e um <section> com heading propriamente dito. A diferença parece pequena, mas define como o navegador, o crawler e o próximo desenvolvedor vão interpretar seu código. No meu último projeto, precisei lidar com uma página de diretório de produtos onde cada item era marcado com <div class="product-card">. O cliente pediu filtro por categoria e ordem personalizada. Como a estrutura não tinha semântica real, o filtro precisava de JavaScript pesado para manipular classes e atributos data. Se eu tivesse usado <article> por produto e <nav> para as categorias, o mesmo filtro poderia ser feito com seletores CSS nativos e muito menos código. Levei cerca de três horas refatorando a estrutura e o filtro caiu de 180 linhas para 47.
Quando as tags tradicionais falham
Existem situações em que a tag padrão do HTML5 simplesmente não resolve. O caso mais comum é layout complexo dentro de componentes reutilizáveis. Tags como <main>, <aside> e <article> são excelentes para estrutura de página, mas não ajudam quando você precisa de agrupamento lógico sem impacto visual ou semântico excessivo. Nesse cenário, <section> com aria-label ou <div> com role apropriado costuma ser o caminho mais limpo. Um problema que vejo frequentemente: desenvolvedores usam <span> para tudo que não tem significado semântico. O span existe para inserção inline de estilo ou script, não para encapsulamento de bloco. Quando você precisa agrupar elementos para estilização ou lógica, <div> é a escolha correta. O span dentro de div não quebra nada e mantém a hierarquia clara.
Como estruturar tags sem perder tempo
A abordagem que funciona para mim é simples. Antes de escrever qualquer markup, monto um esboço em papel ou texto puro listando os blocos lógicos da página. Cada bloco recebe uma tag semântica se houver correspondência no HTML5. Se não houver, uso div com nome de classe descritivo. Só depois disso vou para o código. Isso economiza em média 30% do tempo de desenvolvimento porque evita retrabalho. Não é teoria — já vi equipes perderem dias refatorando markup que poderia ter sido feito corretamente na primeira vez. A regra prática é: se um bloco pode ser identificado por um humano lendo o código sem depender de contexto visual, ele merece uma tag semântica. Se não consegue, provavelmente é um caso para div com classe bem nomeada.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Outro detalhe importante que poucos consideram: aninhamento de tags semânticas. Colocar <article> dentro de <section> é válido e muitas vezes necessário. Mas colocar <div> dentro de <article> só para fins de layout é redundante. O article já é um container. Use div apenas quando precisar de agrupamento que a semântica existente não cobre.
Erros comuns que custam caro
O erro mais frequente que encontro em code review é o uso indiscriminado de <div> em vez de tags apropriadas. Isso não é apenas má prática — afeta acessibilidade e indexação. Um leitor de tela não consegue navegar efficacemente por uma página cheia de divs anônimas. O Google também tem dificuldade em entender a estrutura quando a semântica falta. Outro erro grave é abusar de <section> para qualquer agrupamento. A especificação do W3C define section como uma seção genérica com tema, não como um simples container. Se o conteúdo não tem um heading ou não forma uma seção temática distinta, use div. Section mal usado gera noise tanto para motores de busca quanto para ferramentas de acessibilidade.
Tags auto-fechadas também causam confusão. <br>, <img>, <input> — esses não precisam de barra no final em HTML5. Algumas equipes insistem em <br /> por hábito de XHTML, mas isso é irrelevante e apenas aumenta o tamanho do arquivo desnecessariamente. Em média, isso representa uns 5% a 10% a mais de caracteres em arquivos grandes, o que suma em latência de rede em escala.
O que fazer quando a tag não existe
Às vezes o HTML5 simplesmente não oferece uma tag para o que você precisa. Esse é o momento certo para usar atributos ARIA com moderação. ARIA complementa a semântica quando a tag nativa não cobre o caso, mas não substitui uma boa estrutura HTML. Use role e aria-label apenas quando necessário, nunca como muleta para markup ruim. Se você está construindo um componente muito específico que não se encaixa em nenhuma tag existente, considere criar um elemento customizado com web components. É mais trabalho inicial, mas escala melhor do que empilhar classes e atributos. Para projetos pequenos, claro, isso pode ser overkill. Use o senso comum: se o componente vai aparecer em menos de cinco lugares, div com classe resolve. Se vai aparecer em dezenas de lugares com variações, vale a pena investir em algo mais estruturado.
