<footer>
The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.
Try it
| Content categories | Flow content, palpable content. |
|---|---|
| Permitted content |
Flow content, but with no <footer> or
<header> descendants.
|
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
Any element that accepts
flow content. Note that a <footer> element must not be a
descendant of an <address>,
<header> or another
<footer> element.
|
| Implicit ARIA role |
contentinfo, or
no corresponding role
if a descendant of an
article,
aside,
main,
nav or
section element, or
an element with
role=article,
complementary,
main,
navigation
or
region
|
| Permitted ARIA roles |
group, presentation or
none
|
| DOM interface | HTMLElement |
Attributes
This element only includes the global attributes.
Usage notes
- Enclose information about the author in an
<address>element that can be included into the<footer>element. - When the nearest ancestor sectioning content or sectioning root element is the body element the footer applies to the whole page.
- The
<footer>element is not sectioning content and therefore doesn't introduce a new section in the outline.
Examples
html
<body>
<h3>FIFA World Cup top goalscorers</h3>
<ol>
<li>Miroslav Klose, 16</li>
<li>Ronaldo Nazário, 15</li>
<li>Gerd Müller, 14</li>
</ol>
<footer>
<small>
Copyright © 2023 Football History Archives. All Rights Reserved.
</small>
</footer>
</body>
css
footer {
text-align: center;
padding: 5px;
background-color: #abbaba;
color: #000;
}
Accessibility concerns
Prior to the release of Safari 13, the contentinfo landmark role was not properly exposed by VoiceOver. If needing to support legacy Safari browsers, add role="contentinfo" to the footer element to ensure the landmark will be properly exposed.
Specifications
| Specification |
|---|
| HTML Standard # the-footer-element |
Browser compatibility
BCD tables only load in the browser