Der Header ist der Kopfbereich einer Website, der auf allen Seiten sichtbar ist und die zentralen Orientierungselemente bündelt: Logo, Hauptnavigation, oft eine Telefonnummer oder ein Kontakt-Button, manchmal eine Suchfunktion. Er bildet den konstanten Rahmen der Website und ermöglicht Besuchern, von jeder Unterseite aus zu den wichtigsten Bereichen zu gelangen.
Was ist der Header einer Website?
Der Header ist der Kopfbereich einer Website, der auf allen Seiten sichtbar ist und die zentralen Orientierungselemente bündelt: Logo, Hauptnavigation, oft eine Telefonnummer oder einen Kontakt-Button, manchmal eine Suchfunktion. Er bildet den konstanten Rahmen einer Website und ermöglicht Besuchern, von jeder Unterseite aus zu den wichtigsten Bereichen zu gelangen. Im HTML wird er semantisch durch das header-Element ausgezeichnet.
Als oberer Abschluss jeder Seite liegt der Header im Above-the-Fold-Bereich, also im sofort sichtbaren Ausschnitt. Zusammen mit der Navigation und dem Footer bildet er das strukturelle Grundgerüst, das ein gutes Webdesign über alle Seiten hinweg konsistent hält. Sein Gegenstück am Seitenende ist der Footer, sein inhaltlicher Nachbar meist die Hero-Section.
Der Begriff Header wird in zwei Bedeutungen verwendet: Gemeint ist meist der sichtbare Kopfbereich der Seite. Technisch existiert daneben der HTTP-Header, ein Metadaten-Bereich der Server-Antwort — beide sollten nicht verwechselt werden. In diesem Beitrag geht es um den sichtbaren Seitenkopf, der für Gestaltung, Orientierung und Conversion entscheidend ist.
Was gehört in den Header?
Standard ist das Logo links, das per Klick zur Startseite führt — eine Konvention, die Besucher verinnerlicht haben. Daneben oder darunter liegt die Hauptnavigation mit den wichtigsten Seiten, technisch als nav-Element ausgezeichnet. Rechts platzieren viele Websites ein hervorgehobenes Element für die zentrale Aktion: bei Dienstleistern und Kanzleien typischerweise die Telefonnummer oder einen Kontakt- beziehungsweise Terminbuchungs-Button — den zentralen Call-to-Action.
Weniger ist mehr: Jedes zusätzliche Element konkurriert um Aufmerksamkeit. Suchfeld, Sprachumschalter oder Login gehören nur in den Header, wenn sie tatsächlich regelmäßig gebraucht werden. Auf Mobilgeräten verdichtet sich der Header meist auf Logo, Menü-Symbol (Burger-Icon) und gegebenenfalls einen Anruf-Button — ein Prinzip, das eng mit dem Mobile-First-Ansatz zusammenhängt. Die Struktur der Kopfzeile ist zugleich ein Kernstück der Informationsarchitektur.
Die Reihenfolge der Menüpunkte folgt idealerweise der Bedeutung für den Nutzer, nicht der internen Firmenlogik. Die wichtigsten Zielseiten stehen links, wo der Blick zuerst hinfällt; sekundäre Punkte wandern nach rechts oder in ein Untermenü. Sieben plus/minus zwei Hauptpunkte gelten als praktikable Obergrenze, bevor die Navigation unübersichtlich wird.
Warum ist der Header wichtig?
Der Header ist das stabilste Element der gesamten Website: Er erscheint auf jeder Seite an derselben Stelle und gibt Besuchern jederzeit Orientierung — wo bin ich, wohin kann ich, wie erreiche ich den Anbieter. Eine klare Kopfzeile senkt die Hürde zur Kontaktaufnahme erheblich, weil der Weg dorthin nie mehr als einen Blick entfernt ist. Für die Usability und die gesamte User Experience ist er damit ein Schlüsselelement.
Für die Conversion-Rate-Optimierung ist der Header oft unterschätzt: Ein dauerhaft sichtbarer Kontakt-Button oder eine Telefonnummer im Kopfbereich verkürzt den Weg zur Anfrage von jeder Stelle der Seite aus. Bei mobilen Besuchern kann eine direkt anklickbare Rufnummer den Unterschied zwischen Anruf und Absprung ausmachen — ein Detail, das gerade im Kanzleimarketing über Mandate entscheidet.
Nicht zuletzt prägt der Header den ersten Eindruck: Innerhalb von Sekundenbruchteilen entscheidet ein Besucher, ob eine Website professionell und vertrauenswürdig wirkt. Ein aufgeräumter, klar strukturierter Kopfbereich mit sauberem Logo und lesbarer Navigation zahlt unmittelbar auf dieses Vertrauensurteil ein, während ein überladener oder verrutschter Header sofort Zweifel weckt.
Der Header in der Praxis
Viele Websites nutzen einen sticky Header, der beim Scrollen am oberen Bildschirmrand haften bleibt. Das hält Navigation und Kontaktmöglichkeit permanent verfügbar, kostet aber Bildschirmfläche — auf Mobilgeräten sollte ein solcher Header deshalb besonders flach ausfallen oder sich beim Herunterscrollen verkleinern. Ergänzt wird die Orientierung häufig durch eine Breadcrumb-Navigation unterhalb des Headers.
Technisch zählt der Header zum sofort sichtbaren Bereich und sollte entsprechend schnell laden: das Logo als komprimierte Datei oder SVG, keine blockierenden Skripte, stabile Höhe ohne Nachspringen. Ein Header, der sich beim Laden verschiebt, verschlechtert den Cumulative Layout Shift — eine der Kennzahlen, die Google im Rahmen der Web Vitals bewertet und die direkt in die Core Web Vitals und den Pagespeed einfließt.
In der Umsetzung hat sich bewährt, den Header früh im Quellcode zu laden und seine Höhe im CSS fest zu reservieren, damit der darunterliegende Inhalt nicht springt, sobald das Logo geladen ist. Auch die Ausklapp-Logik des mobilen Menüs sollte ohne merkliche Verzögerung reagieren — träge Navigationen sind eine der häufigsten Ursachen für frühe Absprünge auf Smartphones.
Typische Fehler beim Header
Der häufigste Fehler ist Überladung: zu viele Menüpunkte, mehrere konkurrierende Buttons, ein Suchfeld, das niemand nutzt. Das Ergebnis ist ein unübersichtlicher Kopf, der Orientierung erschwert statt sie zu geben. Ein zweiter Fehler ist ein zu hoher oder springender Header auf Mobilgeräten, der wertvollen Platz frisst und das Layout instabil macht — messbar über den bereits genannten CLS-Wert.
Auch die fehlende Verlinkung des Logos zur Startseite oder ein Kontaktpunkt, der erst nach mehreren Klicks erreichbar ist, kosten Conversions. Gerade für Anbieter, die auf Anfragen angewiesen sind, gilt: Der wichtigste Handlungsaufruf gehört sichtbar in den Header, wie es auch der Leitfaden zum Webdesign für Anwälte empfiehlt.
Ein unterschätzter Fehler betrifft die Barrierefreiheit: Menüs, die sich nur mit der Maus bedienen lassen, zu geringe Kontraste oder fehlende Tastaturnavigation schließen Nutzer aus und verstoßen zunehmend gegen gesetzliche Vorgaben. Ein guter Header funktioniert auch per Tastatur, mit Screenreader und bei starker Vergrößerung.
Der Header im Kontext des Seitenaufbaus
Header, Hero-Section, Content und Footer bilden gemeinsam die vertikale Grundordnung einer Seite. Der Header übernimmt dabei die Rolle des ständigen Ankers, während sich der übrige Inhalt von Seite zu Seite ändert. In Content-Management-Systemen wie WordPress wird er meist zentral als Template-Bestandteil gepflegt, sodass eine Änderung sofort auf allen Seiten greift.
Mit dem Trend zu responsivem Design und mobiler Nutzung hat sich der Header von einer starren Kopfzeile zu einem adaptiven Element entwickelt, das sich je nach Bildschirmgröße neu ordnet. Sein Gestaltungsprinzip bleibt jedoch konstant: maximale Orientierung und der schnellste Weg zum Kontakt, bei minimaler visueller Last. Wer diese Balance trifft, hat mit dem Header eines der wirksamsten und zugleich unauffälligsten Conversion-Elemente einer Website in der Hand.