How to use the footer semantic element

In this post we will see when and where to use the semantic element footer and also an application of its use in a real life project.

Footer Semantic Element Theory

As the name says the <footer> tag, it is used to delimit a footer on our site

But in some cases, it can be used as a footer for other elements as well.

For example a blog post may have a footer with author information

So there is the possibility of having multiple footers on a page, but a footer element cannot be a parent of another footer

Content that usually goes inside a <footer> tag:

Author information;
Copyright;
Contact information;
Links to other pages on the website;

Using footer in practice:

As you can read earlier, the rules you must follow when using the footer are two:

1. That it stays as the last element of the tag in which it is inserted;

2. And that is related to the subject presented in the parent tag;

HTML:

<div>
     <h1>Post about something</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut suscipit erat. Aliquam sit amet porttitor without. Morbi sed sollicitudin lectus. Mauris I was a Leo.</p>
     <footer>Written by Matheus Battisti</footer>
</div>

So in this example, we simulate a post and as the last element of them we include the semantic element footer

Tip:

Also, note that the importance of having well-crafted and semantic HTML can improve page placement in search engines like Google

Conclusion

We saw that on a page we can have several footer elements, for different sections

In addition, the footer is indicated for the footer of the pages, where you can have information such as links and copyright

We can summarize the semantic element footer in: a section with useful information pertinent to the subject of the elements that the tag is in the footer is inserted

And that’s it for today, until the next post!

Also check our YouTube channel by clicking here!