The HTML footer tag defines the footer for a web page or a section. Footers usually contain contact information, links to important pages on a website, and the author of a web page.
When you’re building a web page, you may decide that you want to add a footer. For instance, say you’re building a site for a local coffee shop. You may want to add a footer with the name, contact information, and opening hours of the coffee shop.
That’s where the HTML <footer> tag comes in. The <footer> tag is used to create a footer in HTML. <footer> tags often contain various other tags that support navigation, identify the author of a page, and more.
This tutorial will discuss the basics of the HTML <footer> tag and how you can use it in your code. By the end of this tutorial, you’ll be an expert at using the <footer> tag.
HTML Layout
In HTML, there is a wide range of tags that are used to define the layout of a page and its elements. These tags help developers simplify their web pages because they make the structure of a web page clearer.
Within the <body> tag of a page, there are several basic elements used to define its structure. These are as follows:
- HTML <header>. This tag defines the page header.
- <nav>. This tag defines a navigation bar.
- <article>, <section>, and other tags. These are used to define a page’s main body.
- <footer>. This tag defines the page footer content.
For this tutorial, we will focus on the <footer> HTML element.
<footer> HTML Tag
The <footer> tag in HTML defines a footer for a document or a section of a web page. Footers usually contain the author of a document, contact information, and important links. A footer at the bottom of a section will include any final information related to the content in that section.
Footers are used on most web pages to display information such as:
- Web page author
- Links to related documents
- Copyright
- Contact information
- Site map
- A link to go to the top of the page
- The date on which the page was last updated
Often, a footer will contain HTML headings. These headings will denote different parts of a footer, such as links in a list.
Here’s the syntax for the <footer> tag:
<footer> // Footer contents </footer>
You can use the <footer> HTML tag several times in one document, depending on the structure of your page. However, it can only be used in the <body> tag. You cannot place a <footer> tag within a <header>, an <address>, or another <footer> tag.
For example, if the structure of your <body> tag is complex and contains multiple <article> tags, you may decide to use a <footer> tag to separate certain information from the rest of the section. On the same web page, you can use a <footer> tag to define information at the bottom of the page.
HTML <footer> Template Example
Suppose we are building a web page for a local coffee house called The Golden Roast. This site features information about the coffee house, its origin story, contact information, and directions to the store. We want the page to include a footer with a copyright statement.
We can use the following code to create this footer:
<footer> <p>Copyright © 2020 The Golden Roast.</p> </footer>
When we run our code, the following appears at the bottom of our webpage:
The <footer> tag does not have any tag-specific HTML attributes. However, the tag does support all global attributes in HTML, just like any other tag. All major modern web browsers support the <footer> tag.
HTML Fixed Footer
You may decide that you want your footer to stick to the bottom of the web page. This means that the footer will remain fixed to the bottom of your web page, in a specific place.
This is different from a traditional footer, which just appears wherever it is declared in an HTML file. Traditional footers usually appear at the very bottom of a page.
For example, suppose we want our copyright statement for our coffee house website to be fixed to the bottom of the web page. We want the statement to have a brown background and white text. We can use the following code to accomplish this task:
<body>
<p>Welcome to The Golden Roast!</p>
<style>
footer {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
background-color: brown;
color: white;
text-align: center;
}
</style>
<footer>
<p>Copyright © 2020 The Golden Roast.</p>
</footer>
</body>Our code returns:
We created a footer that sticks to the bottom of our web page.
Let’s break down our code. First, we declared a <body> tag that stores the code for our web page’s body. We then used a <style> tag to define the styles we will apply to the footer element. In our <style> tag, we specified that we want the position of the <footer> element to be fixed.
We set the background color of the element to brown using the HTML and CSS background-color attribute. In addition, we set the color of the text stored within the element to white. This was accomplished using the color attribute. We aligned the footer text to the center of the page.
Next, we set the width of the element to be the size of the entire page. Finally, we used the left: 0 and bottom: 0 parameters to set the position of our footer.
To learn more about the CSS position attributes that we used to make our footer sticky, check out our CSS position article.
Conclusion
The <footer> tag is used to define a footer in HTML. Footers usually contain information relevant to a website, such as a copyright statement, information about the author, and contact details.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
This tutorial discussed, with an example, how to use the <footer> tag in HTML—including how to create a fixed footer. Now you’re equipped with the knowledge you need to start working with the HTML <footer> tag like an expert web developer!
If you’re looking for more HTML learning resources, check out our How to Learn HTML guide.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
