Cabeçalho e rodapé da página: header e footer

Aprenda a usar as tags que marcam o início e o fim de uma página ou seção, como a capa e a contracapa de um livro.

No mundo dos livros, a capa e a contracapa são essenciais. A capa te dá o título, o autor e uma ideia do que esperar. A contracapa geralmente traz informações sobre a editora, o ano de publicação e talvez um resumo final.

No HTML, as tags semânticas <header> e <footer> cumprem papéis muito semelhantes para a sua página web ou para seções específicas dela. Elas não são apenas <div>s com nomes bonitos; elas comunicam o propósito do conteúdo que envolvem.

A tag <header>: o cabeçalho da página ou seção

A tag <header> representa um grupo de conteúdo introdutório ou de navegação. Pense nela como a "capa" ou a "introdução" de uma página ou de uma seção específica.

O que geralmente vai dentro de um <header>?

  • Títulos: <h1> a <h6> (o título principal da página ou da seção).
  • Logotipo: Imagem do logotipo do site.
  • Navegação: Links de navegação principal (<nav>).
  • Formulários de busca: Campo de busca.
  • Informações do autor: Em um <article>, pode conter o nome do autor, data de publicação.

Exemplo de <header> da página:

<header>
  <img src="logo.png" alt="Logotipo do Meu Site">
  <h1>Meu Site Incrível</h1>
  <nav>
    <ul>
      <li><a href="#">Início</a></li>
      <li><a href="#">Sobre</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </nav>
  <form action="/search" method="get">
    <input type="search" name="q" placeholder="Buscar...">
    <button type="submit">Buscar</button>
  </form>
</header>

<header> pode ser usado mais de uma vez?

Sim! Uma página pode ter múltiplos <header>s. Além do <header> principal da página (que geralmente contém o <h1> e a navegação global), você pode ter <header>s dentro de outras seções semânticas, como <article> ou <section>, para introduzir o conteúdo dessas seções.

<article>
  <header>
    <h2>Título do Artigo</h2>
    <p>Publicado por João Silva em <time datetime="2026-05-28">28 de maio de 2026</time></p>
  </header>
  <p>Conteúdo do artigo...</p>
</article>

A tag <footer>: o rodapé da página ou seção

A tag <footer> representa um rodapé para o seu elemento pai mais próximo de seção ou de root (ou seja, para a página inteira, um <article>, uma <section>, etc.). Pense nela como a "contracapa" ou as "informações finais".

O que geralmente vai dentro de um <footer>?

  • Informações de copyright: &copy; 2026 Meu Site.
  • Links relacionados: Links para termos de uso, política de privacidade, mapa do site.
  • Informações de contato: Endereço, telefone.
  • Links para redes sociais.
  • Informações do autor: Em um <article>, pode conter links para o perfil do autor.

Exemplo de <footer> da página:

<footer>
  <p>&copy; 2026 Meu Site. Todos os direitos reservados.</p>
  <nav>
    <ul>
      <li><a href="#">Política de Privacidade</a></li>
      <li><a href="#">Termos de Uso</a></li>
    </ul>
  </nav>
  <address>
    Entre em contato: <a href="mailto:contato@meusite.com">contato@meusite.com</a>
  </address>
</footer>

<footer> pode ser usado mais de uma vez?

Sim, assim como o <header>, uma página pode ter múltiplos <footer>s. Além do <footer> principal da página, você pode ter <footer>s dentro de <article>s ou <section>s para fornecer informações adicionais ou de autoria para aquela seção específica.

<article>
  <header>
    <h2>Título do Artigo</h2>
    <p>Publicado por João Silva</p>
  </header>
  <p>Conteúdo do artigo...</p>
  <footer>
    <p>Leia mais artigos de <a href="/autor/joao-silva">João Silva</a>.</p>
  </footer>
</article>

<header> e <footer> não são apenas <div>s

Lembre-se do que aprendemos sobre HTML semântico: <header> e <footer> são elementos de bloco que, visual e funcionalmente, podem se comportar como <div>s. No entanto, eles carregam um significado semântico que a <div> não tem.

  • Para leitores de tela: Eles anunciam "Cabeçalho" ou "Rodapé", permitindo que o usuário navegue rapidamente por essas regiões.
  • Para mecanismos de busca: Eles ajudam a entender a estrutura e a hierarquia do conteúdo da sua página.

Resumindo

  • <header>:
    • Representa um grupo de conteúdo introdutório ou de navegação.
    • Geralmente contém títulos, logotipos, navegação principal, formulários de busca.
    • Pode ser usado para o cabeçalho da página inteira ou para cabeçalhos de seções (<article>, <section>).
  • <footer>:
    • Representa um rodapé para o seu elemento pai mais próximo de seção ou de root.
    • Geralmente contém informações de copyright, links relacionados, informações de contato, informações do autor.
    • Pode ser usado para o rodapé da página inteira ou para rodapés de seções (<article>, <section>).
  • Ambos são elementos semânticos de bloco que melhoram a acessibilidade, o SEO e a organização do código, comunicando o propósito do conteúdo que envolvem.