HTML semântico

Semântica é significado. No Belavista, usar a tag certa diz o que cada bloco é: cabeçalho do site, navegação, artigo do cartaz, rodapé — não só “uma caixa cinza”.

O exemplo deste capítulo é 04-html-semantico, no pacote que acompanha o volume. Leia → mude uma coisa → preveja → recarregue → confira.

O que você vai aprender

• Preferir elementos com significado a div/span genéricos.
• Montar um esqueleto com header, nav, main, footer.
• Usar article e section com critério.
• Entender o ganho para acessibilidade e manutenção.
• Ver o contraste entre marcação semântica e “só div”.

Significado antes da aparência

div e span não dizem nada sozinhos. Servem quando nenhum elemento específico cabe. Para o site do ateliê, quase sempre cabe:

• header — introdução da página ou de uma seção.
• nav — conjunto de links de navegação.
• main — conteúdo principal (um por página).
• footer — rodapé, créditos, contatos fictícios.
• article — conteúdo que faria sentido sozinho (ex.: ficha de um cartaz).
• section — agrupamento temático com título.

Dois trechos, mesma aparência

Imagine a mesma tipografia. Um trecho só com div/span; outro com tags semânticas. Visualmente iguais após CSS. Para teclado, leitor de tela e quem lê o código, o segundo é legível.

Não escolha tags pelo “jeito que o navegador deixa em negrito”. Escolha pelo papel do conteúdo. Estilo vem no CSS (próxima faixa do volume).

Um main, um foco

Cada página tem um main. É o que a pessoa veio ler. Pule links de navegação com um skip-link quando o layout crescer; por agora, garanta que o conteúdo central não esteja perdido em divs aninhadas sem nome.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML semântico — Belavista</title>
  </head>
  <body>
    <header>
      <p>Laboratório Belavista</p>
      <nav aria-label="Principal">
        <ul>
          <li><a href="#cartazes">Cartazes</a></li>
          <li><a href="#oficinas">Oficinas</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article id="cartazes">
        <h1>Cartaz do mês: tipografia na Rua da Aurora</h1>
        <p>Edição limitada em serigrafia. Conteúdo fictício do ateliê.</p>
      </article>
      <section id="oficinas" aria-labelledby="tit-oficinas">
        <h2 id="tit-oficinas">Oficinas abertas</h2>
        <p>Composição tipográfica e impressão artesanal — datas fictícias.</p>
      </section>
    </main>
    <footer>
      <p>Recife · Laboratório Belavista (exemplo de curso)</p>
    </footer>
  </body>
</html>

Quando usar div

Use div para agrupar só por layout (quando CSS exigir um embrulho sem significado novo). Use span para um trecho em linha sem semântica própria. Se você consegue nomear o papel (“navegação”, “artigo”), quase sempre existe tag melhor.

Erro comum: marcar o título da página como div class="titulo" em vez de h1. Aparência pode ser igual com CSS; o outline do documento e a acessibilidade não.

Critério

Você avança se consegue apontar no exemplo: onde está o main, qual bloco é article, e por que a lista de links está em nav.

Atividades

1. Por que main não deve se repetir várias vezes na mesma página?
2. Qual a diferença de intenção entre article e section no exemplo do Belavista?
3. Em que situação div ainda é aceitável?

Respostas comentadas

1. Porque main identifica o conteúdo principal único. Vários main confundem tecnologias assistivas e o mapa da página.
2. article agrupa o cartaz como unidade autônoma; section agrupa o tema “oficinas” sob um título.
3. Quando você precisa de um contêiner só para CSS/JS e nenhum elemento semântico descreve aquele agrupamento.