Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Semantiek en indeling

Het element <footer>

Het <footer>-HTML-element vertegenwoordigt een voettekst voor het dichtstbijzijnde bovenliggende sectioning content- of sectioning root-element. Een <footer> bevat meestal informatie over de auteur van de sectie, copyrightgegevens of links naar gerelateerde documenten.

Code
<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>
Resultaat in de browser

Attributen

Dit element bevat alleen de globale attributen.

Gebruiksnotities

  • Sluit informatie over de auteur in een <address>-element in dat kan worden opgenomen in het <footer>-element.
  • Wanneer het dichtstbijzijnde bovenliggende sectioning content- of sectioning root-element het body-element is, is de footer van toepassing op de hele pagina.
  • Het <footer>-element is geen sectioning content en introduceert daarom geen nieuwe sectie in de outline.

Toegankelijkheid

Vóór de release van Safari 13 werd de contentinfo-landmark-rol niet correct blootgesteld door VoiceOver. Als ondersteuning voor oudere Safari-browsers nodig is, voeg dan role="contentinfo" toe aan het footer-element om ervoor te zorgen dat de landmark correct wordt blootgesteld.

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

Voorbeelden

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: black;
}
Resultaat in de browser

Technische samenvatting

Inhoudscategorieën Flow content, palpable content.
Toegestane inhoud Flow content, maar zonder <footer>- of <header>-afstammelingen.
Weglaten van tags Geen, zowel de begin- als de eindtag zijn verplicht.
Toegestane bovenliggende elementen Elk element dat flow content accepteert. Merk op dat een <footer>-element geen afstammeling mag zijn van een <address>, <header> of een ander <footer>-element.
Impliciete ARIA-rol contentinfo, of generic als het een afstammeling is van een article, aside, main, nav of section-element, of een element met de rol article, complementary, main, navigation of region
Toegestane ARIA-rollen group, presentation of none
DOM-interface HTMLElement

Zie ook

Verwante elementen