Docs executáveis de HTML: Tag footer

Q: Como escrever o símbolo de copyright no HTML?

Use a entidade ©, que mostra ©. Você também pode digitar o caractere direto quando a página usa . Envolver a linha em a marca como letras miúdas.

Q: Uma página pode ter mais de um footer?

Sim. Cada ou pode ter o seu próprio footer para dados do autor ou tags. Só um footer que não está dentro de article, aside, main, nav ou section é o landmark contentinfo da página para os leitores de tela.

Como fazer um rodapé no HTML

Coloque o conteúdo de fechamento da sua página num elemento <footer>, normalmente a última coisa dentro do <body>. Assim como <header>, ele não tem aparência padrão; o CSS o transforma numa barra de rodapé:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© imprime o símbolo ©. <small> marca a linha de copyright como letras miúdas, que é o significado dela no HTML, e não só uma fonte menor. As listas de links são listas <ul> de verdade, então a maioria dos leitores de tela anuncia quantos links cada coluna tem.

Mantendo o rodapé embaixo

Numa página com pouco conteúdo, o rodapé fica logo abaixo desse conteúdo, com espaço vazio embaixo dele. A solução é uma coluna flex: o contêiner tem pelo menos a altura da janela, e a área principal pega toda a altura que sobra. A caixa cinza abaixo faz o papel de uma janela do navegador:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

Remova flex: 1 do main e o rodapé sobe para logo abaixo do parágrafo. Numa página real, coloque as mesmas regras no <body> com min-height: 100vh (e margin: 0) em vez de uma altura fixa, para que o rodapé fique no fim das páginas curtas e depois do conteúdo nas longas.

Footers dentro de artigos

Um <footer> fecha o article ou section mais próximo, então um post de blog ou um comentário pode ter o seu próprio, com o autor, a data ou as tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

Os leitores de tela tratam só o footer do nível da página como o landmark contentinfo. Um footer dentro de um artigo é um grupo comum, então ele não compete com o rodapé do site.

Dados de contato com address

Para informações de contato sobre a página ou o seu dono, use <address> dentro do footer. Ele é só para dados de contato (não para qualquer endereço postal do seu conteúdo), e os navegadores o mostram em itálico por padrão:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

A quebra de linha dentro do address é um dos bons usos de <br>. Para saber mais sobre links de e-mail, veja a página de link mailto.

Um footer pode conter links, listas, formulários (um cadastro de newsletter), imagens e um <nav>. Ele não pode conter um <header>, outro <footer> nem um <main>. Um segundo menu no rodapé pode ser um <nav> com um rótulo que o diferencie do principal:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Erros comuns

Colocar o <footer> fora do <body>. Tudo o que é visível vai dentro do <body>, inclusive o rodapé.
Usar position: fixed para mantê-lo embaixo. Um rodapé fixo cobre conteúdo em telas pequenas e exige padding em todo lugar. Use o padrão da coluna flex.
Usar <address> para qualquer endereço. Ele é para os dados de contato do autor da página ou do artigo. O endereço de uma loja numa lista de locais é um <p> comum.
Colunas de links montadas com tags <br>. Use listas <ul> para que a estrutura seja anunciada.
Deixar o ano do copyright fixo. Atualize o ano no seu template, ou imprima-o pelo servidor ou pelo build.

Perguntas frequentes

O que é a tag footer no HTML?

<footer> é um elemento semântico para o conteúdo de fechamento de uma página ou seção: copyright, dados de contato, links relacionados ou informações do autor. É uma caixa block sem estilo padrão.

O que colocar no rodapé de um site?

Os rodapés costumam ter o aviso de copyright, links para páginas legais como privacidade e termos, dados de contato, links de redes sociais e um pequeno mapa do site. Mantenha também a navegação principal em <nav> perto do topo, porque nem todo visitante rola até o fim.

Como manter o footer no final da página?

Transforme o body numa coluna flex com pelo menos a altura da janela (display: flex; flex-direction: column; min-height: 100vh;) e dê ao <main> flex: 1. A área principal então cresce para ocupar o espaço vazio e empurra o rodapé para baixo em páginas curtas.

Como escrever o símbolo de copyright no HTML?

Use a entidade ©, que mostra ©. Você também pode digitar o caractere direto quando a página usa <meta charset="utf-8">. Envolver a linha em <small> a marca como letras miúdas.

Uma página pode ter mais de um footer?

Sim. Cada <article> ou <section> pode ter o seu próprio footer para dados do autor ou tags. Só um footer que não está dentro de article, aside, main, nav ou section é o landmark contentinfo da página para os leitores de tela.

Conceitos relacionados