HTML semântico: estrutura com significado — HTML semântico, multimídia e tabelas

Da "sopa de divs" a tags com significado

Durante anos, as páginas eram construídas empilhando <div> para tudo: o cabeçalho, o menu, o conteúdo, o rodapé... O apelido carinhoso disso é sopa de divs. O navegador exibia tudo lindamente, mas nem os leitores de tela nem os buscadores conseguiam distinguir o que era cada coisa. Para uma máquina, uma <div class="nav"> não é um menu: é só mais uma caixa anônima boiando na sopa.

O HTML semântico te tira dessa: usa tags cujo nome descreve sua função. Elas quase não mudam a aparência, mas acrescentam significado à estrutura. E isso destrava duas coisas enormes: acessibilidade e SEO. Mesma cara, muito mais cérebro por trás.

As regiões principais (landmarks)

Essas tags definem landmarks: zonas que a tecnologia assistiva pode listar e às quais pode pular diretamente.

<body>
  <header>
    <h1>Minha revista</h1>
    <nav>
      <a href="/">Início</a>
      <a href="/artigos">Artigos</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Como cozinhar massa</h2>
      <p>Conteúdo do artigo...</p>
    </article>

    <aside>
      <h2>Artigos relacionados</h2>
      <p>...</p>
    </aside>
  </main>

  <footer>
    <p>© 2026 Minha revista</p>
  </footer>
</body>

<header>: o cabeçalho da página (ou de uma seção). Costuma conter o logotipo, o título e a navegação principal.
<nav>: um bloco de navegação. Reservado para os menus importantes, não para qualquer grupo de links.
<main>: o conteúdo principal e único da página. Apenas um por página, e não deve conter cabeçalhos, rodapés nem barras laterais repetidas.
<footer>: o rodapé: créditos, avisos legais, links secundários.

Seções de conteúdo

<article>: uma peça de conteúdo autônoma, que faria sentido por si só (uma notícia, um post de blog, um comentário, uma ficha de produto). O teste: você conseguiria levá-la para um leitor RSS e ela continuaria fazendo sentido?
<section>: uma seção temática do documento, normalmente com seu próprio cabeçalho. Agrupa conteúdo relacionado que não é necessariamente autônomo.
<aside>: conteúdo tangencial ou complementar ao principal: uma barra lateral, um quadro de "você sabia...", publicidade relacionada.

Regra prática: se você está em dúvida entre <section> e <div>, pergunte-se se o bloco merece um cabeçalho próprio. Se sim, provavelmente é uma <section>. Se você só agrupa para pendurar um estilo, a <div> continua sendo sua amiga: nem tudo precisa ser semântico, mas o que significa algo, sim.

Pequenas tags semânticas em linha

<figure> e <figcaption>: agrupam um conteúdo ilustrativo (uma imagem, um gráfico, um trecho de código) com sua legenda.

<figure>
  <img src="grafico.png" alt="Vendas por trimestre em 2025" />
  <figcaption>Figura 1. As vendas cresceram 12%.</figcaption>
</figure>

<time>: marca uma data ou hora de forma legível para máquinas com o atributo datetime.

<p>Publicado em <time datetime="2026-06-22">22 de junho de 2026</time>.</p>

<mark>: destaca texto relevante em seu contexto (por exemplo, os termos buscados dentro de um resultado).

<p>O resultado contém a palavra <mark>semântica</mark>.</p>

Por que isso realmente importa

Acessibilidade: quem usa um leitor de tela pode pedir "lista de regiões" e pular direto para o <main> ou para o <nav>, sem ter que ouvir o cabeçalho em cada página. A sopa de divs não oferece nenhum desses atalhos.
SEO: os buscadores entendem melhor a hierarquia e a importância do conteúdo. Um <article> com seu <h2> e seu <time> grita para o Google "isto é uma notícia com data"; uma <div> fica calada.
Manutenibilidade: o código se lê como prosa. Daqui a seis meses, <nav> vai te dizer muito mais do que <div class="menu-top-v2">.

⚠️ Cilada clássica: usar <div> para tudo por hábito. Antes de escrever uma, pergunte-se se já existe uma tag que diga o que aquele bloco é. Quase sempre, existe.