<footer>: Das Footer-Element

Baseline Widely available

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

Das <footer>-HTML-Element repräsentiert eine Fußzeile für sein nächstes übergeordnetes Abschnittsinhalts- oder Abschnittswurzel--Element. Ein <footer> enthält typischerweise Informationen über den Autor des Abschnitts, Copyright-Daten oder Links zu verwandten Dokumenten.

Probieren Sie es aus

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

Attribute

Dieses Element enthält nur die globalen Attribute.

Hinweise zur Verwendung

  • Schließen Sie Informationen über den Autor in ein <address>-Element ein, das in das <footer>-Element aufgenommen werden kann.
  • Wenn das nächstgelegene übergeordnete Abschnittsinhalt- oder Abschnittswurzel-Element das body-Element ist, gilt die Fußzeile für die gesamte Seite.
  • Das <footer>-Element ist kein Abschnittsinhalt und führt daher keinen neuen Abschnitt in der Gliederung ein.

Barrierefreiheit

Vor der Veröffentlichung von Safari 13 wurde die contentinfo Landmark-Rolle nicht richtig von VoiceOver dargestellt. Wenn Sie ältere Safari-Browser unterstützen müssen, fügen Sie dem footer-Element role="contentinfo" hinzu, um sicherzustellen, dass das Landmark ordnungsgemäß dargestellt wird.

Beispiele

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

Technische Zusammenfassung

Inhaltskategorien Flussinhalt, greifbarer Inhalt.
Erlaubter Inhalt Flussinhalt, jedoch ohne <footer> oder <header> Nachfahren.
Tag-Auslassung Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich.
Erlaubte Eltern Jedes Element, das Flussinhalt akzeptiert. Beachten Sie, dass ein <footer>-Element kein Nachkomme eines <address>, <header> oder eines anderen <footer>-Elements sein darf.
Implizite ARIA-Rolle contentinfo, oder generic wenn ein Nachkomme eines article, aside, main, nav oder section-Elements ist, oder eines Elements mit article, complementary, main, navigation oder region-Rolle
Erlaubte ARIA-Rollen group, presentation oder none
DOM-Schnittstelle [`HTMLElement`](/de-DE/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-footer-element

Browser-Kompatibilität

Siehe auch