HTML semântico: organize a página pelo significado

HTML semântico é a escolha de elementos pelo significado que eles carregam, não pela aparência padrão. Nesta aula, você vai dividir uma página em regiões claras e explicar por que cada elemento está ali.

Imagine uma loja. Há fachada, corredores, balcão principal, setores e rodapé do recibo. Colocar uma placa em cada região ajuda clientes e equipe a se orientar. No HTML, header, nav, main, section, article e footer cumprem esse papel estrutural. A analogia tem limite: elementos não obrigam uma posição na tela. Um footer pode aparecer visualmente ao lado, e o CSS pode reorganizar o layout; semanticamente ele continua sendo o rodapé daquela página ou seção.

Troque caixas genéricas por regiões explicáveis

Uma div é um agrupador sem significado próprio. Ela continua útil para layout, mas não deve ser a resposta automática. Veja uma página pequena:

<header>
  <h1>Caderno de projetos</h1>
  <nav aria-label="Principal">
    <a href="#projetos">Projetos</a>
    <a href="#sobre">Sobre</a>
  </nav>
</header>

<main>
  <section id="projetos" aria-labelledby="titulo-projetos">
    <h2 id="titulo-projetos">Projetos recentes</h2>

    <article>
      <h3>Lista de estudos</h3>
      <p>Uma página para organizar tarefas da semana.</p>
    </article>
  </section>

  <section id="sobre">
    <h2>Sobre mim</h2>
    <p>Estou aprendendo desenvolvimento web.</p>
  </section>
</main>

<footer>
  <p>Feito por Bia em 2026.</p>
</footer>

header reúne a introdução da página. nav identifica um conjunto importante de navegação. main envolve o conteúdo principal e normalmente aparece uma vez por documento. footer guarda informações finais relacionadas ao documento.

Diferencie section, article e div

Uma section é uma seção temática e geralmente possui um título. “Projetos” e “Sobre mim” são assuntos diferentes dentro da mesma página. Um article é uma unidade que ainda faz sentido separada, como uma notícia, postagem, cartão de produto ou comentário. Se o projeto pudesse aparecer sozinho num feed, ele é um bom candidato a article.

Use div quando você só precisa agrupar elementos para estilo ou comportamento e nenhum elemento semântico representa o papel. Pense numa caixa organizadora transparente dentro de um setor já identificado: ela ajuda a arrumar, mas não vira outro departamento.

O teste útil é terminar a frase: “este conteúdo é uma navegação”, “é o conteúdo principal”, “é uma seção sobre projetos”. Se a única justificativa for “preciso de uma caixa”, div pode ser honesta.

Semântica não escolhe o visual. Um header pode ser discreto e uma div pode parecer um grande banner; o CSS controla essa aparência. O elemento HTML deve continuar sendo escolhido pela função do conteúdo, inclusive quando nenhum estilo estiver carregado.

Semântica ajuda a navegar

Tecnologias assistivas conseguem oferecer atalhos entre regiões e títulos. Isso não torna uma página acessível automaticamente; ordem de foco, textos, contraste e interação ainda importam. A marcação semântica fornece uma base mais clara e reduz a quantidade de atributos que você teria de recriar manualmente.

No laboratório, duplique o article, altere título e texto e pressione o botão. O resultado deve passar de uma para duas notícias. O script encontra unidades pela própria estrutura, não por uma classe inventada. Depois remova o título da section e perceba que o agrupamento perde o nome que explicava seu assunto.

Antes da próxima aula, percorra o documento apenas por títulos e regiões. Se a ordem conta uma história coerente, a semântica está ajudando. A seguir, vamos aplicar o mesmo cuidado aos formulários, onde rótulo, tipo e nome definem o que o usuário envia.