HTML Footer: delimitando os conteúdos de rodapé no HTML

Nesta documentação de HTML aprenderemos um pouco sobre o que é um rodapé em uma página web e como podemos delimitá-lo através da tag footer.

Rodapé: o que é?

Um rodapé no HTML é o conteúdo final de uma página ou de uma seção da página.

O rodapé pode conter, por exemplo, informações de contato no fim da página, ou informações de um autor ao final de um artigo.

Veja um exemplo de rodapé na Figura 1.

Figura 1. Rodapé do site da DevMedia

Agora que você já sabe o que é um rodapé, veja como utilizá-lo.

<footer>: na prática

<footer>Meu Site - Todos os direitos Reservados - 2022</footer>

<footer>: como utilizar

Utilizamos a tag <footer> para delimitar o conteúdo de um rodapé dentro do HTML.

A tag <footer> pode ser usada múltiplas vezes em uma mesma página, contanto que seu uso seja semanticamente correto, e para isso, a tag <footer> deve ser utilizada dentro do body, ou dentro de elementos de fluxo, tais como: <nav>, <section>, <article>, <aside>, entre outros. Veja um exemplo no Código 1.

<p>Diferente de tudo que você conhece sobre o antigo zoológico, o BioParque do Rio veio escrever um novo capítulo na história da conservação de espécies no Brasil e ser o cenário de diversas lembranças inesquecíveis que você vai construir com sua família!</p> <footer> <adress> Parque da Quinta da Boa Vista S/N<br>São Cristóvão, RJ, 20940-040. </adress> <p>BioParque - Todos os direitos Reservados - 2022</p> </footer>
Código 1. Exemplo de uso do footer
See the Pen Footer by Eduardo Soares (@eduscxbox) on CodePen.

Veja também o Código 2 com um exemplo de dois footers sendo utilizados na mesma página.

<section> <p>Diferente de tudo que você conhece sobre o antigo zoológico, o BioParque do Rio veio escrever um novo capítulo na história da conservação de espécies no Brasil e ser o cenário de diversas lembranças inesquecíveis que você vai construir com sua família! </p> <footer> <p>Esse artigo foi escrito pelo BioParque do Rio.</p> </footer> </section> <footer> <adress> Parque da Quinta da Boa Vista S/N<br>São Cristóvão, RJ, 20940-040. </adress> <p>BioParque - Todos os direitos Reservados - 2022</p> </footer>
Código 2. Exemplo com dois footers
Importante: Apesar de poder ser usado mais de um footer dentro de uma página, não se deve utilizar os dois dentro de um mesmo elemento pai e nem dois footers um dentro do outro.

<footer>: exemplo prático

Veja abaixo um exemplo prático de uma página com a tag footer sendo utilizado:

See the Pen Exemplo Prático - GameReview by Eduardo Soares (@eduscxbox) on CodePen.

<footer>: compatibilidade com navegadores

O <footer> é suportado em todos os navegadores apresentados na tabela abaixo:

<footer> Chrome Mozilla Firefox Edge / IE Opera Safari
sim sim sim sim sim

Artigos relacionados