::: section-content 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 #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

How to be a wizard

Grow a long, majestic beard.
Wear a tall, pointed hat.
Have I mentioned the beard?

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} 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;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

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 #

::: section-content This element only includes the global attributes. :::

Usage notes #

::: section-content

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 #

::: section-content ::: code-example [html]{.language-name}

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

:::

::: code-example [css]{.language-name}

footer {
  text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: #000;
}

:::

::: {#sect1 .code-example} ::: iframe ::: ::: :::

Accessibility concerns #

::: section-content Prior to the release of Safari 13, the contentinfo landmark role was not properly exposed by VoiceOver{target="_blank"}. 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{target="_blank"} :::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-footer-element]{.small}

:::

Browser compatibility #

::: _table 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 :::

<footer> #

Try it #

HTML Demo: <footer> #

How to be a wizard

Output #

Console Output #

Attributes #

Usage notes #

Examples #

Accessibility concerns #

Specifications #

::: _table #

Specification #

Browser compatibility #

See also #