Header heißt auf deutsch „Kopf“, und wird auch „Kopfzeile“ oder „Kopfbereich“ genannt. Als Header bezeichnet man den obersten Abschnitt einer Webseite, der normalerweise auf jeder Unterseite der Website wiederholt wird. (Eine Ausnahme bilden Landingpages.)
Hier ist mit Header das Design-Element gemeint, nicht der <head> – Bereich der HTML – Seite.
Er enthält wichtige Komponenten, die deiner Besucher:in dabei helfen, durch die Seite zu navigieren, wichtige Informationen sofort zu erfassen und sich gut zurechtzufinden. Ein feststehender Header bleibt zusätzlich beim Scrollen am oberen Seitenrand stehen.
Inhalt eines Headers
Typische Bestandteile eines Headers
Firmen- oder Markenlogo
Das Logo ist oft links im Header platziert. Mit dem Klick darauf kehrst du von allen Unterseiten aus zur Startseite zurück.
Du brauchst nicht unbedingt ein eigenes Logo für deine Website, dein Firmenname reicht völlig aus. Wenn du aber ein Logo hast, trägt das an dieser Stelle zur Wiedererkennung bei und stärkt dein Branding.
Hauptnavigation
Das Hauptmenü oder die Navigationsleiste enthält Links zu den wichtigsten Seiten der Website (z.B. Startseite, Über uns, Angebot, Kontakt). Dies erleichtert die Orientierung und verbessert die Benutzerfreundlichkeit.
Auf einer Onepager-Website ermöglichen die einzelnen Menüpunkte deiner Besucher:in zu den verschiedenen Abschnitten innerhalb der aktuellen Seite zu springen.
Umfangreichere Websites nutzen oft Dropdown-Menüs im Header, um Unterkategorien anzuzeigen und so eine tiefergehende Navigation zu ermöglichen.
Diese beiden Elemente, dein Logo oder deinen Namen sowie eine Navigation, solltest du in deinen Website-Header unbedingt einfügen, optional kannst du auch weitere Komponenten hinzufügen.
Zusätzliche Informationen im Header
Suchfunktion
Ein Suchfeld mit der Benutzer:innen nach spezifischen Inhalten auf deiner Website suchen können. Du erkennst es an der kleinen Lupe.
Kontaktinformationen
Telefonnummer, E-Mail-Adresse oder andere Kontaktmöglichkeiten können extra angezeigt werden.
Call-to-Action (CTA)
Call-to-Actions (CTA) (dt. Handlungsaufforderungen) in Form von Buttons oder Links zu wichtigen Funktionen wie Kontaktformularen, Anmelde- oder Kaufbuttons sind häufig im Header platziert. Sie sollen die Benutzer:innen sofort zur Aktion auffordern wie „Jetzt buchen“, „Anmelden“, „Kontaktieren“ etc.
Social-Media-Links
Links zu den Social-Media-Profilen des Unternehmens mit den Icons der Plattformen sind können im Header platziert werden, alternativ kannst du sie auch im Footer hinzufügen.
Zertifikate und Auszeichnungen
Manchmal werden im Header kleine Symbole oder Hinweise auf Zertifikate und Auszeichnungen platziert, um Vertrauen und Glaubwürdigkeit zu fördern. Auch diese kannst du alternativ im Footer hinzufügen.
Funktion des Headers
Der Header ist meistens das erste, was eine Benutzer:in sieht, wenn sie deine Website aufruft. Ein ansprechend gestalteter und funktionaler Header wirkt einladend und trägt zu einem positiven ersten Eindruck bei.
Deine Besucher:innen möchten schnell finden was sie suchen. Biete ihr einen guten Überblick und möglichst schnellen Zugang zu den wichtigsten Themenbereichen und überlege dir daher ein klare, einfache und übersichtliche Struktur im Header.
Der Header spielt eine entscheidende Rolle für die Benutzerfreundlichkeit und die Navigation auf der Website. Da der Header in der Regel auf jeder Seite der Website gleich bleibt, bietet er eine konstante Orientierungshilfe und erleichtert das Navigieren und die Rückkehr zu wichtigen Seiten.
Bei der Gestaltung und der Auswahl der Elemente achte darauf, ihn übersichtlich zu gestalten und nicht mit Informationen zu überfrachten, denn er soll in erster Linie dafür sorgen, dass deine Besucher:innen sich leicht zurechtfinden.
