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 Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

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