HTML footer – Fußnoten und Seitenfuß

footer – am Ende ist nicht Schluß

Das footer-Element steht nicht nur für den endgültigen Fuß der Seite, sondern kann ebenso auch den Abschluss von Beiträgen in einer Blog-Seite bilden und zusätzliche Informationen zum Beitrag aufnehmen. Das können sowohl Copyright-Informationen als auch Informationen zum Autor oder Links weiteren Quellen sein.

Typische Elemente, die mit einem footer-Element abgeschlossen werden können, sind z.B. article, section und figure. In einem footer-Element können beliebige Elemente (Text, Bilder und natürlich Links) liegen, nicht aber footer, main und header. Auf der anderen Seite sollte in header- und address-Elementen keine footer-Elemente liegen.

Der finale Fuß der Seite

Der Seitenfuß am Ende der Webseite ist der Ort, an dem Besucher nach den Informationen zur Webseite suchen, die in der Hauptnavigation größerer Internet-Auftritte schnell untergehen: Datenschutz und Impressum, Öffnungszeiten sowie nach den Kontaktinformationen. Eine einzelne Zeile mit einem kleinen Copyright-Text wie in den Anfangszeiten des Internets reicht schon lange nicht mehr.

Genauso wie die Hauptnavigation soll der Footer möglichst über alle Seiten hinweg konsistent sein und gleichzeitig die Informationen übersichtlich anbieten. Ein Seitenfuß mit drei oder vier Spalten ist schon fast der Normalfall.

Was im Fuß der Seite allerdings nicht angebracht ist: weitere Ebenen durch eine aufklappende Navigation.

<footer>
	<section>
		<h3>Wichtige Links</h3>
		…
	</section>
	
	<section>
		<h3>Social Media</h3>
		…
	</section>
	
	<section>
		<h3>Direkter Kontakt</h3>
		…
	</section>
</footer>

Damit dem Besucher schnell vor Augen geführt wird, dass er den Seitenfuß erreicht hat, ist das Footer-Element oft mit einer dunklen Hintergrundfarbe hinterlegt.

Footer am Ende – auch bei kurzen Seiten

Wenn der Seitenfuß bei kurzen Seiten in der vertikalen Mitte des Browserfensters sitzt, macht das keinen professionellen Eindruck. Dem Himmel sei dank haben wir heute display:flex.

html,
body { 
  height: 100%; 
  margin: 0;
}

body { 
  display: flex;
  flex-direction: column;
}

footer { margin-top: auto}