Imagem Destaque
Criado em

Layout Semântico no HTML

Depois de entender a base do documento HTML, o próximo passo é organizar o conteúdo da página com semântica.
Neste post, você vai entender como estruturar o layout com elementos que comunicam função, contexto e hierarquia.

O que é layout semântico?

Layout semântico é a prática de estruturar uma página com tags que descrevem o papel real de cada bloco.

Em vez de montar tudo com div, você usa elementos como:

Isso ajuda o navegador, os mecanismos de busca, leitores de tela e até outros desenvolvedores a entenderem melhor a página.

Por que usar semântica no HTML?

Usar semântica melhora vários aspectos do projeto ao mesmo tempo.

SEO

Mecanismos de busca entendem melhor a estrutura da página e o peso de cada bloco.

Acessibilidade

Leitores de tela conseguem navegar com mais clareza entre áreas importantes da interface.

Organização do código

O HTML fica mais legível e mais fácil de manter.

Escalabilidade

Projetos maiores ficam menos confusos quando cada bloco já nasce com função clara.

Comunicação entre design e desenvolvimento

A estrutura deixa de ser apenas visual e passa a refletir intenção.

Quando usar tags semânticas em vez de div?

Sempre que existir uma tag que represente corretamente o papel daquele conteúdo, ela deve ser priorizada.

Use div quando:

Use uma tag semântica quando o bloco tiver uma função clara dentro da página.

Como imaginar uma página semântica?

Pense em uma página como um conjunto de áreas com papéis diferentes:

A semântica existe justamente para nomear isso de forma correta.

Exemplo de estrutura semântica completa

<body>
  <header>
    <nav>
      <a href="/">Início</a>
      <a href="/servicos">Serviços</a>
      <a href="/contato">Contato</a>
    </nav>
  </header>

  <main>
    <section>
      <h1>Título principal da página</h1>
      <p>Introdução do conteúdo.</p>
    </section>

    <section>
      <h2>Serviços</h2>

      <article>
        <h3>Serviço 1</h3>
        <p>Descrição do serviço 1.</p>
      </article>

      <article>
        <h3>Serviço 2</h3>
        <p>Descrição do serviço 2.</p>
      </article>
    </section>

    <aside>
      <h2>Conteúdo complementar</h2>
      <p>Informações relacionadas.</p>
    </aside>
  </main>

  <footer>
    <p>© 2026 Placeholder</p>
  </footer>
</body>

O que é a tag <header>?

A tag <header> representa o cabeçalho de uma página ou de uma seção.

Ela não significa apenas “a parte de cima visualmente”, mas sim uma área introdutória de um contexto.

O que costuma existir dentro do header?

É comum encontrar dentro dela:

Exemplo de header da página

<header>
  <a href="/" class="logo">Placeholder Logo</a>

  <nav aria-label="Navegação principal">
    <a href="/">Início</a>
    <a href="/blog">Blog</a>
    <a href="/contato">Contato</a>
  </nav>
</header>

header só pode existir uma vez?

Não. Você pode ter um header da página e também header dentro de article ou section.

Exemplo de header dentro de artigo

<article>
  <header>
    <h2>Título do artigo</h2>
    <p>Publicado em 06/03/2026</p>
  </header>

  <p>Conteúdo do artigo...</p>
</article>

Regra prática

Use header quando o bloco apresentar ou introduzir aquele contexto.

O que é a tag <nav>?

A tag <nav> representa uma área de navegação importante.

Ela deve ser usada quando aquele conjunto de links ajuda o usuário a se mover pela estrutura principal do conteúdo.

Onde a nav costuma aparecer?

Casos comuns:

Exemplo de navegação principal

<nav aria-label="Navegação principal">
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/sobre">Sobre</a></li>
    <li><a href="/servicos">Serviços</a></li>
    <li><a href="/contato">Contato</a></li>
  </ul>
</nav>

Não. Se for apenas um grupo de links secundários, sociais ou contextuais, talvez não precise.

<p>
  Siga a marca:
  <a href="https://instagram.com">Instagram</a>
  <a href="https://youtube.com">YouTube</a>
</p>

Boa prática

Se a navegação tiver importância estrutural, use nav. Se for apenas uma lista ocasional de links, um container comum pode bastar.

O que é a tag <main>?

A tag <main> representa o conteúdo principal da página.

É dentro dela que fica o conteúdo central daquela URL, excluindo áreas repetidas como cabeçalho, menu principal e rodapé.

Por que o main é importante?

Ele ajuda:

Pode ter mais de um main?

Não. Cada página deve ter apenas um main.

Exemplo

<main>
  <h1>Título principal</h1>
  <p>Conteúdo central da página.</p>
</main>

O que normalmente fica fora do main?

Geralmente ficam fora:

Regra prática

Se aquele conteúdo define o motivo principal de existir daquela página, ele deve estar dentro do main.

O que é a tag <section>?

A tag <section> agrupa conteúdo relacionado por tema.

Ela é ideal quando existe uma parte da página com assunto próprio, geralmente acompanhada de título.

Quando faz sentido usar section?

Use quando houver:

Exemplos comuns

Exemplo

<section aria-labelledby="beneficios-titulo">
  <h2 id="beneficios-titulo">Benefícios</h2>
  <p>Conheça os principais benefícios da solução.</p>
</section>

Toda área visual deve ser section?

Não. Se o bloco não tiver tema próprio, talvez seja melhor usar div.

Regra prática

Se você consegue dar um título real para aquele bloco e ele representa uma parte temática da página, há grande chance de ser section.

O que é a tag <article>?

A tag <article> representa um conteúdo independente.

Ela é usada quando aquele bloco poderia existir sozinho, ser distribuído isoladamente ou reaproveitado fora do contexto atual.

Onde article costuma ser usado?

Casos comuns:

Exemplo de artigo completo

<article>
  <h2>Título do artigo</h2>
  <p>Resumo do conteúdo.</p>
  <a href="/artigo/exemplo">Ler mais</a>
</article>

Exemplo em listagem

<section aria-labelledby="blog-titulo">
  <h2 id="blog-titulo">Últimos artigos</h2>

  <article>
    <h3>Post 1</h3>
    <p>Resumo do post 1.</p>
  </article>

  <article>
    <h3>Post 2</h3>
    <p>Resumo do post 2.</p>
  </article>
</section>

article é a mesma coisa que section?

Não.

Regra prática

Se o bloco poderia ser publicado sozinho, provavelmente é article.

O que é a tag <aside>?

A tag <aside> representa conteúdo complementar ao conteúdo principal.

Ela não é o núcleo da página, mas adiciona contexto, apoio ou extensão ao que já está sendo apresentado.

Onde aside costuma aparecer?

Casos comuns:

Exemplo

<aside>
  <h2>Conteúdo relacionado</h2>
  <ul>
    <li><a href="/post-1">Post relacionado 1</a></li>
    <li><a href="/post-2">Post relacionado 2</a></li>
  </ul>
</aside>

aside precisa estar na lateral?

Não necessariamente. O nome sugere isso, mas o valor semântico está no fato de ser complementar, não na posição visual.

Regra prática

Se o conteúdo é útil, mas não central, aside pode ser a melhor escolha.

A tag <footer> representa o rodapé de uma página ou de uma seção.

Assim como o header, ela também pode aparecer em mais de um contexto.

Exemplos comuns:

Exemplo de rodapé global

<footer>
  <p>© 2026 Criativiarte</p>
  <a href="/politica-de-privacidade">Política de Privacidade</a>
</footer>
<article>
  <h2>Título do artigo</h2>
  <p>Conteúdo do artigo...</p>

  <footer>
    <p>Escrito por Placeholder Autor</p>
  </footer>
</article>

Regra prática

Use footer para encerrar semanticamente um contexto.

O que é a tag <address>?

A tag <address> representa informações de contato relacionadas ao autor de um documento, artigo ou organização.

Ela não deve ser usada para qualquer endereço aleatório dentro do conteúdo. Seu uso faz mais sentido para marcar contato institucional ou autoral.

Exemplo

<address>
  <p>Criativiarte</p>
  <a href="mailto:contato@placeholder.com">contato@placeholder.com</a>
  <a href="tel:+5531999999999">(31) 99999-9999</a>
</address>

Onde ela costuma aparecer?

Normalmente em:

Regra prática

Se a informação for claramente contato oficial daquele contexto, address faz sentido.

Qual é a diferença entre section, article e div?

Essa é uma das dúvidas mais comuns no HTML semântico.

section

Use quando houver um agrupamento temático.

article

Use quando o conteúdo for independente.

div

Use quando o bloco for apenas estrutural ou visual.

Comparação prática

<section>
  <h2>Serviços</h2>

  <div class="cards-grid">
    <article>
      <h3>Serviço 1</h3>
      <p>Descrição do serviço 1.</p>
    </article>

    <article>
      <h3>Serviço 2</h3>
      <p>Descrição do serviço 2.</p>
    </article>
  </div>
</section>

Nesse exemplo:

Qual é a diferença entre header e head?

Essa diferença gera muita confusão no começo.

Fica na estrutura do documento e guarda metadados da página.

Fica no conteúdo visível e representa um cabeçalho semântico.

Exemplo de head

<head>
  <title>Minha página</title>
  <meta name="description" content="Descrição da página" />
</head>

Exemplo de header

<header>
  <h1>Título visível da página</h1>
</header>

Regra prática

Como montar uma página semântica simples?

Abaixo está um exemplo direto e limpo de estrutura bem organizada:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Layout Semântico no HTML | Criativiarte</title>
    <meta
      name="description"
      content="Aprenda a estruturar páginas com tags semânticas do HTML5."
    />
  </head>

  <body>
    <header>
      <a href="/" class="logo">Criativiarte</a>

      <nav aria-label="Navegação principal">
        <a href="/">Início</a>
        <a href="/blog">Blog</a>
        <a href="/contato">Contato</a>
      </nav>
    </header>

    <main>
      <section aria-labelledby="intro-titulo">
        <h1 id="intro-titulo">Layout Semântico no HTML</h1>
        <p>Este conteúdo explica como estruturar uma página com semântica.</p>
      </section>

      <section aria-labelledby="servicos-titulo">
        <h2 id="servicos-titulo">Serviços</h2>

        <div class="grid">
          <article>
            <h3>Criação de Sites</h3>
            <p>Projetos com foco em estrutura, performance e conversão.</p>
          </article>

          <article>
            <h3>Landing Pages</h3>
            <p>Páginas orientadas para captação e vendas.</p>
          </article>
        </div>
      </section>

      <aside>
        <h2>Leitura complementar</h2>
        <p>Veja também outros conteúdos sobre HTML e acessibilidade.</p>
      </aside>
    </main>

    <footer>
      <address>
        <a href="mailto:contato@criativiarte.com">contato@criativiarte.com</a>
      </address>
      <p>© 2026 Criativiarte</p>
    </footer>
  </body>
</html>

Quais são os erros mais comuns no layout semântico?

Usar div para tudo

Esse é o erro mais clássico. Funciona visualmente, mas perde clareza semântica.

Colocar múltiplos main

Cada página deve ter apenas um main.

Usar section sem tema real

Se o bloco não representa um assunto próprio, talvez ele não precise ser section.

Usar article em conteúdo que não é independente

Nem todo card é article. Depende do grau de autonomia daquele conteúdo.

Só use nav quando os links forem realmente importantes para navegação.

Achar que aside precisa ficar na lateral

O valor semântico está na função complementar, não na posição.

Não usar títulos nas seções

Muitas section ficam mais claras quando possuem heading.

Como decidir a tag certa?

Faça perguntas simples para cada bloco da interface.

Esse conteúdo apresenta a página ou a seção?

Use header.

Esse bloco é navegação importante?

Use nav.

Esse é o conteúdo central da URL?

Use main.

Esse bloco tem um tema próprio?

Use section.

Esse conteúdo poderia existir sozinho?

Use article.

Esse bloco é complementar?

Use aside.

Esse bloco encerra ou traz informações finais?

Use footer.

Esse conteúdo é contato oficial?

Use address.

Nenhuma dessas opções faz sentido?

Use div.

Resumo prático das tags de layout semântico

header

Cabeçalho de página ou seção.

Navegação importante.

main

Conteúdo principal da página.

section

Agrupamento temático.

article

Conteúdo independente.

aside

Conteúdo complementar.

Rodapé de página ou seção.

address

Informações de contato relacionadas ao contexto.

Checklist rápido de semântica no layout

Antes de finalizar uma página, vale conferir:

Conclusão

HTML semântico não serve apenas para “deixar bonito no código”. Ele serve para comunicar a função real de cada parte da interface.

Quando você usa as tags corretas:

Depois de dominar a base do documento e o layout semântico, o próximo passo natural é aprofundar em: