Einen Footer erstellen im HTML5
Das Element footer angeben im HTML5
Wenn es um einen Footer oder eine Fußzeile geht, dann denken Sie wahrscheinlich an die Fußzeile auf einer Webseite. Das footer-Element von HTML5 passt dafür, aber so wie header können Sie es auch woanders einsetzen.
Das footer-Element repräsentiert einen Footer für das nächstgelegene Element (z.B. article, aside, blockquote, body, details, fieldset, figure, nav, section oder td), in dem es verschachtelt ist. Es ist nur dann der Footer für die ganze Seite, wenn der nächste Vorfahr der body ist. Und wenn ein footer den gesamten Inhalt seines Abschnitts einfasst (z.B. ein article), dann repräsentiert er je nach Inhalt so etwas wie einen Anhang, einen Index, einen langen Kolophon oder ein langes Lizenzabkommen.
Dieser footer repräsentiert den Footer für die ganze Seite, weil der nächste Vorfahr das body-Element ist. Nun besitzt die Seite header-, nav-, article-, section-, aside- und footer-Elemente. Nicht jede Seite braucht das alles, aber sie repräsentieren die in HTML verfügbaren primären Seitenkonstrukte.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
<nav role="navigation">
... [ul mit Links] ...
</nav>
</header>
<article>
<h1 id="html5-lernen">
HTML5 Lernen - Grundlagen und Tutorials
</h1>
<p>
Die neuen Features von HTML5. So setzen Sie anspruchsvolle Web-Layouts mit HTML5. Wir wollen Ihnen einen ausführlichen Einblick in die neuen Möglichkeiten von HTML5 geben.
</p>
<section>
<h2 id="html5-info" lang="es">
HTML5 Info
</h2>
<p>
HTML5 bietet neue Elemente für die Definition der Struktur einer Website und die Einbettung von Inhalten. HTML5 ist eine Spezifikation, die einige neue Tags und neues Markup beschreibt.
</p>
</section>
<section>
<h2 id="html5-text-gestaltung">
HTML5 Text gestalten
</h2>
<p>
In diesem Kapitel von HTML5 erforschen wir die folgenden neuen Elemente und Funktionen: Kopfzeilen, Fußzeilen und Navigationsmöglichkeiten.
</p>
</section>
</article>
<aside role="complementary">
<h1>
Einen Footer erstellen im HTML5
</h1>
<p>
Wenn es um einen Footer oder eine Fußzeile geht, dann denken Sie wahrscheinlich an die Fußzeile auf einer Webseite. Das footer-Element von HTML5 passt dafür, aber so wie header können Sie es auch woanders einsetzen.
</p>
</aside>
<footer>
<p>
<small>© Copyright 2024</small>
</p>
</footer>
</body>
</html>
Das footer-Element selbst zwingt dem Text standardmäßig keine Formatierung auf. Hier ist der Copyright-Hinweis kleiner als normaler Text, weil es in einem small-Element verschachtelt ist, um semantisch das Kleingedruckte zu repräsentieren. Wie bei allem anderen auch können Sie die Schriftgröße mit CSS ändern.
Eine Fußzeile erstellen
- Platzieren Sie den Cursor innerhalb des Elements, für das Sie einen Footer erstellen wollen.
- Tippen Sie
<footer>. - Geben Sie den Inhalt des Footer ein.
- Tippen Sie
</footer>.
Ein footer enthält üblicherweise Informationen über seinen Abschnitt, z.B. Links zu verwandten Dokumenten, Copyright-Informationen, den Autor und ähnliche Elemente. Siehe die Beispiele 1 und 2 unten Andere footer-Beispiele.
Ein
footermuss nicht unbedingt am Ende des Elements stehen, in dem es enthalten ist (es ist aber meistens so).
Es ist nicht erlaubt, in einem footer einen header oder einen anderen footer zu verschachteln. Außerdem können Sie keinen footer innerhalb eines header- oder address-Elements verschachteln.
Andere footer-Beispiele
Sie haben ein kleines Beispiel gesehen, wo ein Footer für die ganze Seite gilt. Hier ist ein anderer Seiten-Footer, aber mit mehr Inhalt. Beispiel 1:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
<nav role="navigation">
... [ul mit Links] ...
</nav>
</header>
<!-- Dies ist ein Seiten-Footer, weil der nächste Vorfahr body ist -->
<footer role="contentinfo">
<p>
<small>© Copyright 2024 HTML-Lernen.</small>
</p>
<ul>
<li><a href="agb.html">AGB</a></li>
<li><a href="datenschutz.html">Datenschutzbestimmungen</a></li>
</ul>
</footer>
</body>
</html>
Das nächste Beispiel demonstriert einen footer im Kontext eines Seitenabschnitts (in diesem Fall ein article) und einen zweiten footer für die ganze Seite.
Beispiel 2 (ein Footer für einen Seitenabschnitt und die ganze Seite):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<header>
<nav role="navigation">
... [ul mit Links] ...
</nav>
</header>
<article>
<h1>
Einen Footer erstellen im HTML5
</h1>
<p>
Wenn es um einen Footer oder eine Fußzeile geht, dann denken Sie wahrscheinlich an die Fußzeile auf einer Webseite. Das footer-Element von HTML5 passt dafür, aber so wie header können Sie es auch woanders einsetzen.
</p>
<!-- Der footer des article -->
<footer>
<p>
Max Mustermann ist ein freiberufliche Journalist, der seinen Abschluss in Informatik an der Universität Kopenhagen gemacht hat.
</p>
<address> Sie erreichen ihn unter <a href="mailto: max@tmax-mustermann.com">max@max-mustermann.com</a>. </address>
</footer>
</article>
<!-- der Footer der Seite -->
<footer id="footer-page" role="contentinfo">
... [Copyright, AGB, Datenschutzbestimmungen] ...
</footer>
</body>
</html>
Die id="footer-page" (Sie können jede gültige id angeben) im Seiten-Footer ist optional und dient nur dazu, sie zur Steuerung der Formatierung vom anderen footer unterscheiden zu können. Beachten Sie, dass nur der Seiten-footer die optionale role="contentinfo" bekommt.