Definition and Usage
The <footer> tag is typically used to represent the global footer at the bottom of a webpage, or to include information such as the author, copyright details, or links to related documents for a section or article.
A footer is often used to show who wrote a section, when it was last updated, or where readers can find related information.
The <footer> tag is used to represent a footer for the nearest ancestor sectioning content, or for the <body> tag itself if no such ancestor exists—this is commonly referred to as the global footer.
Representing the Global Footer
The <footer> tag is typically used to represent a global footer at the bottom of a webpage. This area commonly contains information such as copyright notices or links to privacy policies.
The role attribute value contentinfo provides a clearer semantic meaning as an extension of the HTML element concept. It is used to enhance web accessibility for screen reader users. To explicitly indicate a global footer, use role="contentinfo".
Here is an example of the <footer> tag used as a global footer:
Code Explanation
The <address> tag is used to provide contact information.
Important Note!
In most cases, screen readers can determine whether a <footer> tag represents a global footer based on its context within the HTML document. Therefore, the role="contentinfo" attribute is often optional.
However, for improved accessibility—especially in browsers or assistive technologies that may not correctly infer the footer's scope—explicitly adding role="contentinfo" is recommended.
You can also use a <div> tag with role="contentinfo" to indicate a global footer:
Additional Explanation
The <div> tag is used as a container for creating layouts or dividing content sections. It does not carry any inherent semantic meaning on its own.
Although the <div> tag carries no inherent semantic meaning, adding role="contentinfo" can signal to screen readers that the element serves as a global footer.
Still, whenever possible, use the semantic <footer> tag with role="contentinfo" instead of relying on a generic <div>—unless browser compatibility or other constraints prevent it.
Footer Content for Sections: Information such as Author, Copyright, and Related Links
The <footer> tag can also be used within individual sections of a webpage to include information such as the author, copyright details, or links to related content.
This use of the <footer> tag helps clarify the semantic structure of the page and makes the content easier to understand. It is commonly used as a child of the following tags:
<article><aside>-
<main> <nav><section>
When used as a child of these tags, the <footer> is not considered a global footer, and it is not treated as having the role="contentinfo" by default.
Here's an example where a <footer> tag is used to include author information for an article:
Syntax Structure
Multiple <footer> tags can exist within a single HTML document.
However, there are certain disallowed descendant and ancestor elements for the <footer> tag.
These restrictions exist because improper usage can make it harder to interpret the structure and meaning of your webpage content. It is important to consider these rules when using the <footer> tag.
The following table lists the elements that are not permitted as descendants or parents of the <footer> tag.
Browser compatibility
| Tag |
Desktop Chrome
|
DesktopDesktop Edge
|
Desktop Firefox
|
Safari
|
|---|---|---|---|---|
<footer>
|
5 | 12 | 4 | 5 |
Specifications
| Specification | |
|---|---|
<footer>
|
HTML Standard #the-footer-element |