Als letztes beschäftigen wir uns mit dem Footer-Bereich einer Webseite. Dieser ist nicht weniger wichtig als der Header- oder Content-Bereich. Es gibt nämlich verschiedene Möglichkeiten, den Footer-Bereich für deine Webseite zu nutzen.
Hinweis: Bereits in dem Artikel “Aufbau einer Webseite” haben wir als Analogie für bessere Erklärungen ein Haus samt Grundstück übernommen. Das behalte ich so bei. Somit wird manches einfacher und verständlicher.
Der Footer #
Am Ende einer Webseite befindet sich der Footer. Dieser kann unterschiedlich groß ausfallen. Manche Webseiten haben einen sehr kleinen Footer mit Copyright-Angaben wie beispielsweise “2022 Copyright by idigIT e.U.”, andere Webseiten nutzen den Footer sehr umfangreich, wie www.amazon.de
Die Gestaltung liegt in diesem Fall wieder ganz bei dir. Du kannst sogar mit einem kleinen Footer starten und diesen nach und nach ergänzen und aufbauen.
Wichtig zu wissen: Der Footer-Bereich und dessen Code-Elemente finden sich innerhalb des <body>-Tags wieder. Seit HTML5 besitzt der Footer-Bereich zwar einen eigenen <footer>-Tag, doch dieser muss sich ebenfalls innerhalb des <body>-Tags befinden.
Doch keine Sorge, mit diesen Informationen beschäftigen wir uns separat.
Sichtbare Inhalte des Footers #
Wenn es um die sichtbaren Inhalte des Footer-Bereichs geht, dann kannst du dich wie im Content-Bereich ausleben. Es obliegt dir, welche Informationen dort zu finden sind. Manche Webseitenbetreiber verankern wichtige Links, andere Kontaktinformationen und andere wiederum platzieren Auszeichnungen und Qualitätssiegel, damit man Professionalität und Qualität vermittelt.
Für unsere Analogie des Raums kann man somit sagen, dass es deine Entscheidung ist, ob der Raum eine Fußbodenheizung und eine einfache oder eine aufwendige Rand-Zierleiste besitzt. Darüber hinaus könnte man sogar sagen, ob du es einfach machst, dass deine Besucher zurück auf den Flur kommen oder ein Hindernis überwinden müssen. Die Gestaltung obliegt dir und ich empfehle dir deshalb, sich an Webseiten zu orientieren, die dir gefallen.
Unsichtbare Inhalte des Footers #
Im Quelltext einer Webseite befindet sich der Footer ganz unten, vor dem </body>-Tag. Wie erwähnt KANN der Footer durch den <footer>-Tag gekennzeichnet werden, allerdings ist das keine Verpflichtung.
Da der Code am Ende des <html>-Tags am Schluss gelesen und interpretiert wird, verankert man dort gerne Scripts und Plugins, die etwas aufwändig sind und Ladezeit beanspruchen. Dadurch wird sichergestellt, dass der Content-Bereich für deinen Besucher sichtbar ist und sich dieser nicht über die Ladezeit deiner Webseite beschwert.
Persönlicher Tipp: Aus dieser Überlegung heraus könnte man annehmen, alle Skripte und Plugins in den Footer zu packen. Das ist allerdings ein Trugschluss. Schriftarten, Effekte und Designelemente benötigen die notwendigen Dateien BEVOR sie selbst geladen und angezeigt werden. Aus diesem Grund müssen sich diese Aufrufe oft im <head>-Bereich wiederfinden. Sollte also ein Plugin oder ein Tool nicht wie gewünscht funktionieren, dann versuche den Ort des Aufrufs zu ändern, vom Footer-Bereich in den <head>- oder <body>-Bereich.
Legen wir das doch wieder auf unseren Raum um:
Es gibt Stromleitungen, Wasserleitungen und Ähnliches im Boden (nicht nur in der Wand). Je nachdem, welche Wände uns zur Verfügung stehen und welche Leitungen wir verlegen möchten, kann es manchmal sinnvoll sein, diese nicht in der Wand, sondern primär im Boden zu verankern – oder umgekehrt.
Da uns aber bei einem Raum eine Decke und ein Boden für Installationen zur Verfügung steht, wäre es falsch anzunehmen, dass eine Fußbodenheizung in der Decke besser aufgehoben ist, damit sie den Raum von oben herunter erwärmt.
Das gute an HTML ist, dass du jederzeit flexibel bist. Wenn ein Code falsch platziert ist und mit einem anderen Code kollidiert, dann kannst du das meist in wenigen Minuten korrigieren. Bei einem Raum ist das leider nicht so einfach der Fall.
Weitere Informationen und Links #
In diesem Abschnitt findest du einige weiterführende Links zu diesem Thema. Dabei handelt es sich um Inhalte von Dritten, die sich damit eingehend beschäftigt haben und das ich nicht unnötig wiederholen möchte.
Diese Links sind alle persönlich besucht und ausgesucht. Es werden nur seriöse Links verankert und keine Backlink-Pusher, die ihre Sichtbarkeit dadurch in die Höhe treiben möchten. Sollte ein Link nicht mehr funktionieren oder sich anders verhalten als erwartet, dann sag mir bitte Bescheid, damit ich das umgehend korrigieren kann.
- www.einstein1.net/footer/ abgerufen am 20.10.2022
- www.elmastudio.de/tipps-und-plugins…/ abgerufen am 20.10.2022
- www.mockplus.com/blog/post/website-footer-design abgerufen am 20.10.2022