HTML Footer Tag

We will discuss the HTML <footer> tag in this article.

HTML <footer> tag is used to define a footer for a document or a section. It is generally used in the last of the section (bottom of the page).

The footer tag was introduced in HTML5, and before that, it was specified using the "id" attribute, for example: <div id = "footer">. The footer is placed at the bottom of the web page. It contains typical information.

HTML <footer> tag contains information such as author information, sitemap, contact information, copyright information, back-to-top links, related documents, etc.

Note: You can have one or many footer elements in one document.

If you want to include information about the author, such as their address, e-mail, etc., on your web page, all the relevant elements should be included in the footer.

The HTML <footer> tag supports both event and global attributes.

Examples of HTML Footer Tag

Let us understand the Html <footer>tag properly with the help of examples.

Example 1:

We will use the <footer> tag in this demonstration. We are going to write the author and mail information in the <footer> tag.

Code:

Output:

We can see the <footer> tag in the output below.

Example 2:

We can notice that in Example-1, the footer was not at the bottom because we used CSS to put it at the bottom and make it easily recognizable. We are going to apply style to <footer> tag in this demonstration.

Code:

Output:

We can easily witness the footer at the bottom of the web page in the output given below.

Example 3:

We will add the "About Us" information, such as home, about, career, contact us, and visit here, in the HTML <footer> tag in this demonstration.

Code:

Output:

Here is the result. We can see the footer with "About Us" information on the web page.

Example 4:

We will see the demonstration of the HTML footer tag that contains copyright information. We are going to utilize the <script> tag to add the functionality so that we will construct the button, and the button, when clicked, displays the footer at the bottom of the page.

Code:

Here, in the result, we can witness the copyright information when the button is pressed.

Result when the button is not pressed:

Result when the button is pressed:

Example 5:

We are going to construct 3 sections in the HTML footer tag, which will be the "About us" section, the "Important links" section, and the "Contact Information" section.

Code:

Output:

We can clearly see the three sections in the footer in the output given below.

Example 6:

Before HTML5, the footer was defined using the "id" attribute. In this demonstration, we will create the footer using the "id" attribute.

Code:

Output:

We can see the footer in the output given below.

Supporting Browsers

• Chrome Brower
• Firefox
• Opera
• Internet Explorer
• Safari

Conclusion

We have studied the HTML footer tag in this article. The <footer> tag defines a footer of the web page, which is used to show the information about the contact, copyright, etc. We have studied various examples of HTML <footer> tags to understand them properly.