Desenvolvimento HTML

Como utilizar o elemento semântico footer

12 de agosto de 2019

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.

elemento semântico footer capa

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:

  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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x