Header und Footer sind in reinem HTML optisch gar nicht erkennbar
Viele Webseiten haben einen erkennbaren Kopfbereich, und viele auch einen erkennbaren Fußbereich. Je nach Art der Webseite kann auch ein anfängliches Inhaltsverzeichnis der Kopfbereich sein. Seit HTML5 ist es möglich, solche Bereiche durch entsprechende Elemente zu markieren.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Titel</title> </head> <body> <header> <h1>Die ICH AG</h1> Ein Unternehmen der WIR-Gruppe </header> <h1>Aktuelles</h1> Viele Neuigkeiten usw. <footer> <p>Diese Seite wurde mit LIEBE zum Detail erstellt</p> </footer> </body> </html>
Um für eine Webseite einen Kopfbereich zu definieren, notieren Sie innerhalb des Dokumentkörpers ein header-Element in der Form <header>…</header> (header = Kopfbereich). Wenn Sie einen Fußbereich definieren möchten, notieren Sie ihn in der Form <footer>…</footer> (footer = Fußbereich).
Sowohl zwischen <header> und </header> als auch zwischen <footer> und </footer> können Sie Text und andere HTML-Elemente notieren, jedoch keine untergeordneten header- und footer-Elemente.
Semantisch sinnvolle Inhalte für den Kopfbereich einer Webseite sind beispielsweise die Seitenüberschrift. der Name des Anbieters oder der Website, ein Corporate-Logo oder eine Top-Navigation. Im Fußbereich stehen üblicherweise Informationen wie rechtliche Hinweise zur Lizenzform, Verweise zu Impressum, Geschäftsbedingungen und Ähnliches.
Die Elemente header und footer beeinflussen nicht die hierarchische Logik, die durch Abschnitte und Überschriften entsteht. Sie können Kopf- und Fußbereiche durchaus auch für einzelne Abschnitte (sections) definieren.
Optisch haben die Elemente header und footer keine andere Wirkung, als eine neue Zeile im Textfluss zu erzeugen. Um Kopf- und Fußbereiche erkennbar als solche zu gestalten, können Sie CSS bzw. CSS-Eigenschaften auf die Elemente header und footer anwenden. So können Sie beispielsweise Hintergrundfarben, Hintergrundbilder, Umrandungen usw. bestimmen.
Zum Thema Browser-Unterstützung dieser Elemente siehe auch:
Arbeiten mit Browsern unbekannten Elementen
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.