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
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:
- Que ele fique como último elemento da tag em que está inserido;
- 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