Como utilizar o elemento semântico footer

Neste post veremos quando e onde utilizar o elemento semântico footer e também uma aplicação de seu uso em um projeto da vida real.

Teoria do elemento semântico footer

Como o próprio nome diz a tag <footer>, é utilizada para delimitar um rodapé no nosso site

Mas em alguns casos, pode ser utilizados como rodapé de outros elementos também

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Por exemplo: um post de um blog, pode ter um footer com informações do autor

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

Então existe a possibilidade de ter múltiplos footers em uma página, mas um elemento footer não pode ser pai de outro footer

Conteúdos que geralmente ficam dentro de uma tag <footer>:

• Informações sobre o autor;
• Copyright;
• Informações de contato;
• Links para outras páginas do site;

Utilizando footer na prática:

Como você pode ler anteriormente as regras que você deve seguir ao utilizar o footer são duas:

1. Que ele fique como último elemento da tag em que está inserido;
2. E que tenha relação com o assunto apresentado na tag pai;

HTML:

<div>
    <h1>Post sobre alguma coisa</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut suscipit erat. Aliquam sit amet porttitor sem. Morbi sed sollicitudin lectus. Mauris eu erat leo.</p>
    <footer>Escrito por Matheus Battisti</footer>
</div>

Então neste exemplo simulamos um post e como último elemento deles incluímos o elemento semântico footer

Dica:

Perceba também que a importância de ter um HTML bem feito e semântico pode melhorar a colocação da página nos mecanismos de busca como o Google

Conclusão

Vimos que em uma página podemos ter diversos elementos footers, para seções diferentes

Além disso o footer é indicado para o rodapé das páginas, onde pode ter informações como links e copyright

Podemos resumir o elemento semântico footer em: uma seção com informações úteis e pertinentes ao assunto dos elementos que a tag está do rodapé está inserida

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 

Referências: MDN