W3docs
pt
Entrar

Tag HTML <footer>

A tag <footer> define o rodapé de um site ou seção. Descrição, atributos e exemplos da tag.

A tag <footer> define o rodapé de uma página web ou de um <section>, <article> ou outro elemento de seccionamento. Um rodapé normalmente contém informações de direitos autorais e autoria, dados de contato, links de navegação, documentos relacionados ou um link "voltar ao topo".

Esta página aborda para que serve o <footer>, como ele se mapeia para um landmark de acessibilidade, por que você deve preferir usá-lo em vez de um simples <div>, e como posicionar rodapés de página e rodapés de artigos na mesma página.

O <footer> é um dos elementos semânticos do HTML5.

Um <footer> típico pode conter:

  • informações de direitos autorais, autoria e contato
  • documentos relacionados
  • um mapa do site
  • links "voltar ao topo"
Dica

Se o rodapé contiver dados de contato, envolva-os com a tag <address>.

Visualmente, <footer> e <div class="footer"> são renderizados da mesma forma — ambos são elementos de bloco sem nenhuma estilização padrão além disso. A diferença está no significado, e esse significado traz benefícios reais:

  • Acessibilidade. Quando <footer> é filho direto de <body>, os navegadores o expõem como o landmark ARIA contentinfo. Usuários de leitores de tela podem ir diretamente a ele com um atalho de landmark, e a tecnologia assistiva anuncia "informação de conteúdo" para que saibam em qual região entraram. Um <div> não transmite nada disso.
  • SEO e legibilidade por máquina. Mecanismos de busca e ferramentas de modo leitura usam regiões semânticas para entender a estrutura da página. Um <footer> marca claramente metadados suplementares de página ou de seção.
  • Estrutura do documento e manutenibilidade. Tags semânticas tornam o markup autodescritivo, para que o próximo desenvolvedor (ou você, meses depois) possa entender a estrutura de relance.

Use <footer> sempre que o conteúdo for genuinamente material de rodapé. Use <div> apenas para agrupamentos genéricos, sem significado.

O landmark contentinfo

A função ARIA à qual um <footer> se mapeia depende de onde ele está posicionado:

  • Um <footer> que é filho direto de <body> se torna o landmark contentinfo — o rodapé de toda a página. Deve haver apenas um rodapé de página nesse nível.
  • Um <footer> aninhado dentro de <article>, <section>, <aside>, <nav> ou <main> não é um landmark — ele não tem a função contentinfo. Ele simplesmente marca o rodapé daquele trecho de conteúdo, e você pode ter tantos quantas seções existirem.

É por isso que você pode adicionar com segurança um rodapé a cada artigo em uma página sem confundir a tecnologia assistiva: apenas o de nível superior é o contentinfo da página.

Sintaxe

A tag <footer> vem em pares. O conteúdo é escrito entre as tags de abertura (<footer>) e de fechamento (</footer>).

O rodapé abaixo é filho direto de <body>, portanto age como o landmark contentinfo da página.

Tag HTML <footer>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .header {
        height: 40px;
        padding: 20px 20px 0;
        background: #e1e1e1;
      }
      .main-content {
        height: 60vh;
        padding: 20px;
      }
      footer {
        padding: 10px 20px;
        background: #666;
        color: white;
      }
      a {
        color: #00aaff;
      }
    </style>
  </head>
  <body>
    <div class="header">Header / Menu</div>
    <div class="main-content">
      <h1>Main content</h1>
      <p>This is some paragraph. </p>
    </div>
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>
Experimente Você Mesmo »

Rodapés dentro de <article> e um rodapé de página juntos

Você pode ter vários elementos <footer> em uma única página. Um padrão comum é um rodapé por <article> (para o autor, data ou tags daquele artigo) mais um rodapé de página único no final. Os rodapés de artigos não são landmarks; apenas o de nível <body> é contentinfo.

<!DOCTYPE html>
<html>
  <body>
    <main>
      <article>
        <h2>First post</h2>
        <p>Some article content...</p>
        <footer>
          <p>Posted by Jane Doe on 2026-06-18 · Filed under HTML</p>
        </footer>
      </article>

      <article>
        <h2>Second post</h2>
        <p>More article content...</p>
        <footer>
          <p>Posted by John Smith on 2026-06-17 · Filed under CSS</p>
        </footer>
      </article>
    </main>

    <!-- Page-level footer: this one is the contentinfo landmark -->
    <footer>
      <p>Company © W3docs. All rights reserved.</p>
    </footer>
  </body>
</html>

Veja também os elementos de seccionamento relacionados: <header>, <main>, <section> e <article>.

Restrição de aninhamento

Um <footer> não pode conter outro <footer> ou um <header> como descendente. O markup a seguir é inválido:

<!-- Invalid: a footer nested inside a footer -->
<footer>
  <p>Site footer</p>
  <footer>
    <p>This nested footer is not allowed.</p>
  </footer>
</footer>

Se você precisar de um rodapé para uma subseção, dê a essa seção seu próprio elemento de seccionamento (como <article> ou <section>) e coloque o rodapé dentro dele.

Atributos

A tag <footer> suporta os Atributos Globais e os Atributos de Evento.

O <footer> não tem estilos padrão especiais — é apenas um elemento de bloco — portanto, você o estiliza como qualquer outra caixa. Um visual comum é uma barra escura e centralizada:

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

Prática

Prática
Quando um elemento footer do HTML se torna o landmark ARIA contentinfo?
Quando um elemento footer do HTML se torna o landmark ARIA contentinfo?
Was this page helpful?