Montando uma página completa com HTML semântico

Parabéns! Você chegou ao final do submódulo de HTML Semântico. Agora que você conhece as principais tags semânticas — <header>, <footer>, <nav>, <main>, <section>, <article>, <aside>, <details>, <summary>, <figure>, <figcaption> e <time> — é hora de ver como todas elas se encaixam para construir uma página web completa e bem estruturada.

Nesta lição, vamos montar a estrutura de uma página de blog fictícia, aplicando tudo o que aprendemos. O objetivo é demonstrar a hierarquia e o uso correto de cada tag, transformando a "sopa de divs" em um documento HTML significativo e acessível.

Estrutura geral de uma página semântica

Uma página web típica, usando HTML semântico, segue uma estrutura lógica que reflete as diferentes regiões do conteúdo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Título da Página Semântica</title>
</head>
<body>

  <header>
    <!-- Conteúdo do cabeçalho global: logo, título do site, navegação principal -->
  </header>

  <main>
    <!-- Conteúdo principal e único da página -->
    <section>
      <!-- Seção temática dentro do conteúdo principal -->
    </section>
    <article>
      <!-- Conteúdo independente e auto-contido -->
    </article>
    <aside>
      <!-- Conteúdo complementar relacionado ao main ou section/article -->
    </aside>
  </main>

  <footer>
    <!-- Conteúdo do rodapé global: copyright, links secundários -->
  </footer>

</body>
</html>

Exemplo prático: Página de Blog Semântica

Vamos construir a estrutura de uma página de blog que apresenta um artigo principal e uma barra lateral com informações complementares.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meu Blog Semântico - Artigo sobre HTML</title>
</head>
<body>

  <!-- CABEÇALHO GLOBAL DA PÁGINA -->
  <header>
    <h1><a href="/">Meu Blog Semântico</a></h1>
    <nav>
      <ul>
        <li><a href="/">Início</a></li>
        <li><a href="/sobre">Sobre</a></li>
        <li><a href="/contato">Contato</a></li>
      </ul>
    </nav>
  </header>

  <!-- CONTEÚDO PRINCIPAL E ÚNICO DA PÁGINA -->
  <main>

    <!-- ARTIGO PRINCIPAL -->
    <article>
      <header>
        <h2>A Importância do HTML Semântico no Desenvolvimento Web</h2>
        <p>Publicado por <span class="autor">Maria Silva</span> em <time datetime="2026-05-28">28 de maio de 2026</time></p>
      </header>

      <section>
        <h3>O que é Semântica?</h3>
        <p>HTML semântico significa usar as tags HTML de forma que elas descrevam o propósito ou o significado do conteúdo que elas envolvem.</p>
        <figure>
          <img src="img/html-semantico.jpg" alt="Exemplo de código HTML semântico">
          <figcaption>Código HTML bem estruturado com tags semânticas.</figcaption>
        </figure>
      </section>

      <section>
        <h3>Benefícios do HTML Semântico</h3>
        <ul>
          <li>Melhora a acessibilidade para leitores de tela.</li>
          <li>Otimiza o SEO para mecanismos de busca.</li>
          <li>Facilita a manutenção e organização do código.</li>
        </ul>
      </section>

      <section>
        <h3>Perguntas Frequentes</h3>
        <details>
          <summary>Por que não usar apenas divs?</summary>
          <p>Divs não carregam significado. Tags semânticas dão contexto para máquinas e tecnologias assistivas.</p>
        </details>
        <details>
          <summary>O HTML semântico muda a aparência?</summary>
          <p>Não, a aparência é controlada pelo CSS. O HTML semântico é sobre significado.</p>
        </details>
      </section>

      <footer>
        <p>Categorias: <a href="/categoria/html">HTML</a>, <a href="/categoria/web">Desenvolvimento Web</a></p>
        <p>Compartilhe este artigo!</p>
      </footer>
    </article>

    <!-- BARRA LATERAL COM CONTEÚDO COMPLEMENTAR -->
    <aside>
      <section>
        <h3>Sobre o Autor</h3>
        <p>Maria Silva é uma desenvolvedora front-end com paixão por acessibilidade e boas práticas.</p>
        <p><a href="/autor/maria">Ver todos os artigos de Maria</a></p>
      </section>

      <section>
        <h3>Posts Recentes</h3>
        <ul>
          <li><a href="/post/css-grid">CSS Grid na Prática</a></li>
          <li><a href="/post/javascript-iniciantes">JavaScript para Iniciantes</a></li>
        </ul>
      </section>
    </aside>

  </main>

  <!-- RODAPÉ GLOBAL DA PÁGINA -->
  <footer>
    <nav>
      <ul>
        <li><a href="/politica">Política de Privacidade</a></li>
        <li><a href="/termos">Termos de Uso</a></li>
      </ul>
    </nav>
    <p>&copy; <time datetime="2026">2026</time> Meu Blog Semântico. Todos os direitos reservados.</p>
  </footer>

</body>
</html>

Análise da Estrutura

Vamos quebrar o exemplo acima e entender o uso de cada tag:

<header> (global): Contém o título principal do blog (<h1>) e a navegação global (<nav>).
<main>: Envolve todo o conteúdo principal e único da página, que neste caso é um artigo e uma barra lateral.
<article>: Representa o post do blog em si. É um conteúdo independente e auto-contido.
- <header> (do artigo): Contém o título do artigo (<h2>), o autor e a data de publicação (<time>).
- <section> (dentro do artigo): Divide o artigo em seções temáticas (ex: "O que é Semântica?", "Benefícios").
  - <figure> e <figcaption>: Associam uma imagem à sua legenda dentro de uma seção do artigo.
  - <details> e <summary>: Criam uma seção de "Perguntas Frequentes" expansível dentro do artigo.
- <footer> (do artigo): Contém informações relacionadas ao artigo, como categorias e links para compartilhamento.
<aside>: Contém conteúdo complementar ao <main> (ou ao <article> se estivesse aninhado diretamente nele). Neste caso, tem seções sobre o autor e posts recentes.
- <section> (dentro do aside): Divide o conteúdo complementar em seções temáticas (ex: "Sobre o Autor", "Posts Recentes").
<footer> (global): Contém a navegação secundária de rodapé (<nav>) e informações de copyright (<time> para o ano).

Conclusão

Ao usar o HTML semântico, você não está apenas escrevendo código; você está construindo uma estrutura significativa para o seu conteúdo. Isso não só torna seu site mais acessível para todos os usuários e mais amigável para mecanismos de busca, mas também facilita o trabalho de outros desenvolvedores (e do seu eu futuro!) ao ler e manter o código.

Continue praticando o uso dessas tags e sempre se pergunte: "Qual é o significado deste conteúdo? Existe uma tag HTML que o descreva melhor do que uma <div> ou <span>?" A resposta a essa pergunta o guiará para um HTML mais robusto e profissional.