Docs executáveis de HTML: HTML semântico

Q: Quais são as tags semânticas do HTML?

As tags de layout são , , , , , e . Outras tags semânticas comuns são , , , , , e os títulos de a .

Q: A div é um elemento semântico?

Não. não tem significado próprio; é uma caixa genérica para estilo e layout. Use quando nenhuma tag semântica serve, e use , , e as outras quando alguma serve.

Q: Quantos elementos main uma página pode ter?

Um visível por página. Ele envolve o conteúdo exclusivo daquela página e não deve ficar dentro de , , , ou .

O que é HTML semântico

HTML semântico significa escolher cada tag pelo que o conteúdo é: a navegação vai em <nav>, o conteúdo principal em <main>, um post de blog em <article>. As tags parecem caixas comuns, mas dizem ao navegador, aos leitores de tela e aos buscadores o que cada parte da página faz. Aqui está uma página completa montada com as tags semânticas de layout, cada uma com contorno e rótulo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Apague o elemento <style> e a página parece texto simples, mas a estrutura continua lá para quem lê o código e para programas que o leem sem olhar os pixels.

As tags semânticas de layout

Tag	Use para	Landmark no leitor de tela
`<header>`	A introdução da página ou de um artigo: logo, título, autoria	banner (só quando não está dentro de `article`, `aside`, `main`, `nav` ou `section`)
`<nav>`	Um bloco de links de navegação principais	navigation
`<main>`	O conteúdo exclusivo desta página, uma vez por página	main
`<article>`	Uma peça independente que faz sentido sozinha: um post, um comentário, um card de produto	nenhum por padrão
`<section>`	Um grupo temático de conteúdo com um título próprio	region, só quando tem um nome acessível
`<aside>`	Conteúdo relacionado ao lado do fluxo principal: uma barra lateral, uma nota	complementary
`<footer>`	Informações de fechamento da página ou de um artigo: copyright, autor, links	contentinfo (só no nível da página)

Cada tag tem a sua própria página com mais detalhes: header, nav, section e footer. Esta página mostra como elas se encaixam.

Por que não usar só div

Uma página feita só de elementos <div> pode parecer idêntica a uma semântica. A diferença está no que a marcação diz. Aperte os botões para contornar os elementos que carregam significado em cada versão:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

A versão com divs encontra 0, a versão semântica encontra 4. É isso que as tecnologias assistivas enxergam: quem usa leitor de tela pode pular direto para a navegação ou para o conteúdo principal na página semântica, e precisa ler tudo na página de divs. Nomes de classe como class="nav" não significam nada para o navegador.

<div> continua sendo a escolha certa para caixas que existem só para estilo ou layout, como o wrapper flex .cols do primeiro exemplo.

main, article e aside

<main> envolve o que é exclusivo desta página e aparece uma vez. Dentro dele, <article> marca conteúdo que faria sentido sozinho se fosse copiado para outro site, e <aside> marca conteúdo relacionado que poderia ser removido sem quebrar o artigo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

O artigo tem o seu próprio <header> e <footer>. Eles não se limitam ao nível da página: cada um introduz ou fecha o article ou section mais próximo. O elemento <time datetime> dá a data num formato legível por máquina enquanto a mostra num formato legível por pessoas.

Verifique a estrutura dos títulos

Os títulos são a outra metade da estrutura. Quem usa leitor de tela muitas vezes percorre a página de título em título, então os níveis devem se ler como um sumário, sem níveis pulados. Este script imprime a estrutura da página em que roda:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

O h4 embaixo de "Brewing" pula um nível. Troque por h3 e a estrutura fica limpa. Escolha os níveis de título pela estrutura e mude o tamanho com CSS se quiser maiores ou menores.

Mais tags semânticas

Semântica não é só layout. Estas tags de texto também carregam significado:

Tag	Significado
`<strong>`	Texto importante (negrito por padrão)
`<em>`	Ênfase (itálico por padrão)
`<figure>` e `<figcaption>`	Uma imagem, gráfico ou trecho de código com a sua legenda
`<time datetime="...">`	Uma data ou hora num formato legível por máquina
`<address>`	Dados de contato do autor da página ou do artigo
`<mark>`	Texto destacado, como um resultado de busca
`<abbr title="...">`	Uma abreviação com a sua forma completa
`<button>`	Algo que executa uma ação

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Passe o mouse sobre a abreviação "W3C" para ver a forma completa numa dica.

Erros comuns

Usar uma tag pela aparência. <blockquote> é para citações, não para recuo; <h3> é um nível de título, não um texto em negrito de tamanho médio. Estilize com CSS.
Envolver tudo em <section>. Uma section deve ter um título e um tema. Se você precisa de uma caixa para estilo, use <div>.
Mais de um <main> visível. Mantenha um por página, e nunca o coloque dentro de <article>, <aside>, <header>, <nav> ou <footer>.
Colocar toda lista de links em <nav>. Reserve para blocos de navegação principais, como o menu do site ou um sumário. Alguns links num rodapé não precisam dela.
Elementos <div> clicáveis. Uma <div onclick> não é alcançável pelo teclado. Use <button> para ações e <a href> para navegação.

Perguntas frequentes

O que é HTML semântico?

HTML semântico é a marcação em que cada tag descreve o significado do seu conteúdo: <nav> para navegação, <article> para uma peça independente, <button> para um botão. Assim o navegador, os leitores de tela e os buscadores entendem a página sem adivinhar a partir de nomes de classe ou estilos.

Quais são as tags semânticas do HTML?

As tags de layout são <header>, <nav>, <main>, <article>, <section>, <aside> e <footer>. Outras tags semânticas comuns são <figure>, <figcaption>, <time>, <address>, <strong>, <em> e os títulos de <h1> a <h6>.

A div é um elemento semântico?

Não. <div> não tem significado próprio; é uma caixa genérica para estilo e layout. Use quando nenhuma tag semântica serve, e use <header>, <main>, <nav> e as outras quando alguma serve.

Para que serve a tag aside?

<aside> guarda conteúdo relacionado ao conteúdo principal, mas fora do seu fluxo: uma barra lateral, uma caixa de links relacionados, uma nota de glossário ou uma citação em destaque. No nível da página, os leitores de tela a listam como um landmark complementar.

Quantos elementos main uma página pode ter?

Um <main> visível por página. Ele envolve o conteúdo exclusivo daquela página e não deve ficar dentro de <header>, <nav>, <article>, <aside> ou <footer>.

HTML semântico ajuda no SEO?

Ajuda os buscadores a entender qual parte da página é o conteúdo principal, qual é a navegação e como os títulos se relacionam. Sozinho ele não é um atalho de ranqueamento, mas elimina o trabalho de adivinhação e melhora a acessibilidade, o que já vale a pena por si só.

Conceitos relacionados