<footer> HTML-Fußzeilen-Element
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <footer> HTML-Element repräsentiert eine Fußzeile für das nächstliegende übergeordnete abschnittsorientierte Inhaltselement oder Wurzelelement eines Abschnitts. Ein <footer> enthält typischerweise Informationen über den Autor des Abschnitts, Urheberrechtsdaten 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: white;
}
Attribute
Dieses Element enthält nur die globalen Attribute.
Nutzungshinweise
- Schließen Sie Informationen über den Autor in ein
<address>-Element ein, das in das<footer>-Element aufgenommen werden kann. - Wenn das nächstliegende übergeordnete abschnittsorientierte Inhalts- oder Wurzelelement das Body-Element ist, gilt die Fußzeile für die gesamte Seite.
- Das
<footer>-Element ist kein abschnittsorientierter Inhalt und führt daher keinen neuen Abschnitt im Gliederungsbereich ein.
Barrierefreiheit
Vor der Veröffentlichung von Safari 13 wurde die contentinfo-Landmark-Rolle von VoiceOver nicht ordnungsgemäß dargestellt. Um ältere Safari-Browser zu unterstützen, fügen Sie dem footer-Element role="contentinfo" hinzu, um sicherzustellen, dass die Landmarke ordnungsgemäß dargestellt wird.
Beispiele
<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>
footer {
text-align: center;
padding: 5px;
background-color: #abbaba;
color: black;
}
Technische Übersicht
| Inhaltskategorien | Flussinhalt, greifbarer Inhalt. |
|---|---|
| Erlaubter Inhalt |
Flussinhalt, jedoch ohne <footer> oder
<header> Nachkommen.
|
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| 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
generisch
wenn ein Nachkomme eines
article,
aside,
main,
nav oder
section-Elements,
oder eines Elements mit
article,
complementary,
main,
navigation
oder
region Rolle.
|
| Erlaubte ARIA-Rollen |
group, presentation oder
none
|
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-footer-element |