W3cubDocs

/HTML

<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 generic 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.

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

Specifications

Specification
HTML Standard # the-footer-element

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`footer`	5	12	4	9	11.1	5	4.4	18	4	11.1	4.2	1.0