<footer>: The Footer element

BaselineWidely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The<footer>HTML element represents a footer for its nearest ancestorsectioning content orsectioning root element. A<footer> typically contains information about the author of the section, copyright data or links to related documents.

Try it

<article>  <h1>How to be a wizard</h1>  <ol>    <li>Grow a long, majestic beard.</li>    <li>Wear a tall, pointed hat.</li>    <li>Have I mentioned the beard?</li>  </ol>  <footer>    <p>© 2018 Gandalf</p>  </footer></article>

article {  min-height: 100%;  display: grid;  grid-template-rows: auto 1fr auto;}footer {  display: flex;  justify-content: center;  padding: 5px;  background-color: #45a1ff;  color: #fff;}

Attributes

This element only includes theglobal 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 theoutline.

Accessibility

Prior to the release of Safari 13, thecontentinfolandmark role was not properly exposed byVoiceOver. If needing to support legacy Safari browsers, addrole="contentinfo" to thefooter element to ensure the landmark will be properly exposed.

Related:WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't

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;}

Technical summary

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 acceptsflow content. Note that a`<footer>` element must not be a descendant of an`<address>`,`<header>` or another`<footer>` element.
Implicit ARIA role	contentinfo, orgeneric if a descendant of anarticle,aside,main,nav orsection element, or an element with`article`,`complementary`,`main`,`navigation` or`region` role
Permitted ARIA roles	`group`,`presentation` or`none`
DOM interface	`HTMLElement`