Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
<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 Juli 2015.
Das <footer> HTML-Element repräsentiert ein Footer für sein nächstes übergeordnetes Sectioning-Content- oder Sectioning-Root-Element. Ein <footer> enthält typischerweise Informationen über den Autor der Sektion, 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: white;
}
Attribute
Dieses Element umfasst nur die globalen Attribute.
Anwendungshinweise
- Schließen Sie Informationen über den Autor in ein
<address>-Element ein, das in das<footer>-Element aufgenommen werden kann. - Wenn das nächste übergeordnete Sectioning-Content- oder Sectioning-Root-Element das Body-Element ist, gilt der Footer für die gesamte Seite.
- Das
<footer>-Element ist kein Sectioning-Content und führt daher nicht zu einem neuen Abschnitt in der Gliederung.
Barrierefreiheit
Vor der Veröffentlichung von Safari 13 wurde die contentinfo Landmark-Rolle nicht korrekt von VoiceOver dargestellt. Wenn Sie ältere Safari-Browser unterstützen müssen, fügen Sie role="contentinfo" zum footer-Element hinzu, um sicherzustellen, dass das Landmark korrekt 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 Zusammenfassung
| Inhaltskategorien | Flow-Content, greifbarer Inhalt. |
|---|---|
| Erlaubte Inhalte |
Flow-Content, aber ohne <footer>- oder
<header>-Nachkommen.
|
| Tag-Auslassung | Keine, sowohl der Start- als auch der End-Tag sind erforderlich. |
| Erlaubte Eltern-Elemente |
Jedes Element, das
Flow-Content 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, oder
eines Elements mit
article ,
complementary ,
main ,
navigation
oder
region -Rolle
|
| Erlaubte ARIA-Rollen |
group, presentation oder
none
|
| DOM-Interface | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-footer-element |
Browser-Kompatibilität
Loading...