Der Header ist der obere Bereich einer Seite, der auf allen Seiten einer Website gleich aussieht. Er trägt das Logo, die Hauptnavigation und oft einen Zugang zu Suche oder Kontakt. Seine Aufgabe ist Orientierung: Er sagt, auf wessen Seite man sich befindet, und bietet den Weg zu allem anderen.
- Header
Oberer Bereich einer Seite, der sich auf allen Seiten wiederholt und Logo und Hauptnavigation trägt.
Beispiel: „Im Header liegen das Logo links und die Navigation rechts.“Auch: Kopfbereich, Kopfzeile oder Seitenkopf. In HTML steht dafür das Element header, das auf einer Seite auch mehrfach vorkommen darf, etwa als Kopf eines Artikels.
Abgrenzung zur Hero Section: Der Header wiederholt sich unverändert auf jeder Seite. Die Hero Section steht darunter und ist je Seite verschieden.
Was in den Header gehört
Drei Dinge sind gesetzt: das Logo als Verweis auf die Startseite, die Hauptnavigation und der Weg zur wichtigsten Handlung, meist Kontakt oder Anfrage. Alles weitere ist eine Entscheidung gegen Platz, denn der Header nimmt ihn jeder Seite gleichermaßen weg.
Das Logo verlinkt dabei immer auf die Startseite. Besucher erwarten das, ohne darüber nachzudenken, und bei einem fehlenden Link suchen sie sichtbar nach dem Weg zurück.
Wie viel Höhe der Header bekommen darf
Auf einem Telefon bleiben vom ersten Bildschirm rund 600 Pixel. Ein Header von 120 Pixeln Höhe verbraucht davon ein Fünftel, bevor der erste Inhalt beginnt. Wir halten ihn deshalb auf Telefonen unter 64 Pixel und lassen ihn auf dem Desktop etwas größer werden.
Bleibt der Header beim Scrollen stehen, kostet er diese Höhe dauerhaft. Das lohnt sich bei langen Seiten, auf denen die Navigation oft gebraucht wird. Eine Variante, die beim Scrollen schrumpft, verbindet beides, muss aber ohne Springen umschalten.
Der Header auf dem Telefon
Dort passen Logo, ein Menüknopf und höchstens ein weiteres Element nebeneinander. Die Hauptnavigation wandert hinter den Burger-Button in eine Off-Canvas-Navigation. Welches dritte Element bleibt, entscheidet die Website: bei einem Handwerksbetrieb die Telefonnummer, bei einem Shop der Warenkorb.