Aufbau einer Webseite: Header, Inhalt und Footer richtig verstehen

Wer zum ersten Mal eine eigene Website plant, stößt schnell auf Begriffe wie Header, Body und Footer. Was dahintersteckt, lässt sich in fünf Minuten verstehen - und wer es versteht, trifft von Anfang an bessere Entscheidungen. Dieses Grundwissen gilt unabhängig davon, ob man WordPress, ein anderes System oder eine Agentur nutzt.

In meiner Arbeit mit kleinen und mittelständischen Unternehmen in Deutschland stelle ich fest, dass viele Inhaber beim ersten Gespräch über ihre Website unsicher sind, wenn es um Begriffe wie Navigation, Call-to-Action oder Footer-Links geht. Das muss nicht so sein. Die Grundstruktur einer Website ist so logisch aufgebaut wie der Aufbau eines guten Briefes - Einleitung, Hauptteil, Abschluss.

Die drei Ebenen einer Website auf einen Blick

Jede Website, egal ob Visitenkarte oder Onlineshop, besteht aus denselben drei übereinanderliegenden Bereichen:

• Header - der Kopfbereich, den der Besucher als Erstes sieht
• Body - der Hauptinhalt, der den eigentlichen Mehrwert liefert
• Footer - der Fußbereich mit rechtlichen Pflichtangaben und weiterführenden Links

Diese Aufteilung ist kein Design-Trend, sondern eine bewährte Konvention. Besucher kennen sie von jeder Website, die sie je aufgerufen haben - deshalb suchen sie das Logo oben links und das Impressum unten. Wer von dieser Erwartung abweicht, irritiert seine Besucher, anstatt ihnen zu helfen.

Der Header: Orientierung in Sekunden

Der Header ist der schmale, meist fixierte Streifen am oberen Rand einer Website. Er ist auf jeder Unterseite identisch - das ist kein Versehen, sondern Absicht. Besucher navigieren zwischen verschiedenen Seiten hin und her, und der Header gibt ihnen dabei immer denselben roten Faden.

In einen guten Header gehören drei Dinge:

Das Logo steht links oben. Es ist mit der Startseite verlinkt, damit Besucher jederzeit zum Ausgangspunkt zurückkehren können. Der Logo-Bereich vermittelt in Kombination mit dem Firmenname auf einen Blick, mit wem man es zu tun hat.

Die Hauptnavigation listet die wichtigsten Bereiche der Website auf. Bei einer typischen Unternehmensseite sind das Startseite, Leistungen, Über uns und Kontakt - manchmal ergänzt um Blog oder Referenzen. Fünf bis sieben Punkte sind ideal. Mehr macht das Menü unruhig und schwerer lesbar, besonders auf mobilen Geräten.

Der Call-to-Action, kurz CTA, ist eine auffällige Schaltfläche, die zu einer konkreten Handlung auffordert. Typische Formulierungen sind 'Angebot anfordern', 'Kostenlos beraten lassen' oder 'Jetzt Termin buchen'. Der CTA steht in der Regel rechts oben, oft in einer Farbe, die sich vom Rest der Seite abhebt.

Bei einem Kunden aus dem Handwerksbereich haben wir den Header auf drei Elemente reduziert: Logo links, drei Menüpunkte in der Mitte, Telefonnummer als CTA rechts. Die Kontaktanfragen stiegen deutlich - einfach weil die Nummer sofort sichtbar war, ohne zu suchen.

Die Hauptnavigation im Detail

Die Navigation ist das Rückgrat einer Website. Sie hilft Besuchern, sich zurechtzufinden - aber sie hilft auch Suchmaschinen, die Struktur der Seite zu verstehen. Eine logische Navigation zeigt, welche Themen zusammengehören und welche Seiten wichtig sind.

Ein häufiger Fehler bei kleinen Unternehmenswebsites ist eine Navigation, die intern gedacht ist statt besucherorientiert. Menüpunkte wie 'Unser Portfolio 2.0' oder 'Neuigkeiten Q3' verwirren. Besucher denken nicht in internen Begriffen. Sie denken in Fragen: Was bietet ihr an? Wie kann ich euch erreichen? Was kostet das?

Ein zweiter Fehler ist zu viel Tiefe. Wenn Besucher dreimal klicken müssen, um zum gewünschten Inhalt zu gelangen, verlassen die meisten die Seite vorher. Faustregel: Jeder wichtige Inhalt sollte mit maximal zwei Klicks von der Startseite aus erreichbar sein.

Der Body: Inhalt, der überzeugt

Der Body ist der größte und inhaltlich schwerste Teil einer Website. Hier findet der Besucher Antworten auf seine eigentlichen Fragen. Gleichzeitig ist der Body der Bereich, den Suchmaschinen am stärksten bewerten.

Auf einer typischen Unternehmens-Startseite besteht der Body aus mehreren aufeinander aufbauenden Abschnitten:

Hero-Bereich: Direkt unter dem Header folgt meistens ein großflächiger Einstiegsbereich mit einem Bild oder einer ruhigen Grafik, einer zentralen Aussage und einem weiteren Call-to-Action. Dieser Bereich beantwortet in einem Satz, wer das Unternehmen ist und was es tut.

Leistungen oder Angebote: Ein klarer Überblick über das, was angeboten wird. Oft als Kacheln oder kurze Absätze mit Zwischenüberschriften aufgebaut, damit Besucher schnell scannen können.

Vertrauenselemente: Referenzen, Kundenstimmen, Zertifikate, Partner-Logos oder kurze Zahlen (Anzahl Projekte, Jahre Erfahrung). Diese Elemente nehmen die natürliche Skepsis eines neuen Besuchers.

Text-Bild-Abschnitte: Längere inhaltliche Bereiche, die Leistungen erklären oder einen Einblick in die Arbeitsweise geben. Der Wechsel zwischen Text und Bild sorgt für Rhythmus und hält das Auge in Bewegung.

Abschließender CTA: Am Ende des Body steht oft ein weiterer Handlungsaufruf. Wer bis hierher gescrollt hat, ist bereits an dem interessiert, was angeboten wird - ein klarer letzter Impuls zur Kontaktaufnahme kommt hier gut.

Der Body ist auch der Ort für gut strukturierte Unterseiten - Leistungsseiten, Über-uns-Seiten, Blogbeiträge. Jede dieser Seiten hat ihren eigenen Body, der auf das jeweilige Thema zugeschnitten ist. Die Grundstruktur mit Einstieg, Inhalt und Abschluss bleibt dabei überall gleich.

Vertrauen aufbauen: was im Body nicht fehlen darf

Vertrauenselemente sind einer der am häufigsten unterschätzten Teile einer Unternehmenswebsite. Besucher, die eine Firma nicht kennen, sind zunächst skeptisch. Ob eine Dienstleistung tatsächlich gut ist, lässt sich über das Internet nicht direkt prüfen - deshalb suchen sie nach Belegen.

Kurze Kundenstimmen mit Name und Unternehmen wirken deutlich überzeugender als anonyme Aussagen. Zahlen wie 'über 80 abgeschlossene Projekte' oder 'seit mehr als zehn Jahren im Bereich Webentwicklung tätig' geben einen konkreten Eindruck von Erfahrung. Partner-Logos bekannter Marken oder Zertifizierungen schaffen Assoziation mit Qualität.

Für Unternehmen, die mit einem gut strukturierten Webauftritt Kunden gewinnen wollen, ist dieser Abschnitt mindestens so wichtig wie die Beschreibung der eigenen Leistungen.

Der Footer: Pflicht und Orientierung

Der Footer ist der Bereich am Ende jeder Seite, den Besucher scrollen, wenn sie etwas Bestimmtes suchen: rechtliche Informationen, Kontaktdaten, eine alternative Navigation. Er ist auf allen Unterseiten identisch - genauso wie der Header.

Für deutsche Unternehmenswebsites sind bestimmte Inhalte im Footer gesetzlich vorgeschrieben oder zumindest dringend empfohlen:

Impressum: Pflicht für alle geschäftsmäßigen Websites. Der Link muss klar als 'Impressum' beschriftet und von jeder Seite der Website aus mit maximal zwei Klicks erreichbar sein.

Datenschutzerklärung: Ebenfalls Pflicht, insbesondere wenn die Website Daten erhebt - was praktisch jede Seite mit Kontaktformular oder Analysesoftware tut. Die Erklärung muss separat vom Impressum stehen.

Kontaktdaten: Anschrift, Telefonnummer oder E-Mail. Viele Besucher suchen diese Angaben bewusst im Footer, wenn sie keine eigene Kontaktseite finden.

Sekundäre Navigation: Eine vereinfachte Wiederholung der Hauptmenüpunkte oder Links zu wichtigen Unterseiten. Wer bis zum Ende gescrollt hat, findet hier einen schnellen Weg zu dem, was er sucht - ohne wieder nach oben scrollen zu müssen.

Social-Media-Links: Wenn das Unternehmen auf Plattformen präsent ist, gehören die Icons in den Footer. Sie lenken nicht vom Hauptinhalt ab, sind aber für Interessierte leicht zu finden.

Ein Fehler, den ich regelmäßig sehe: Der Footer einer frisch erstellten Website enthält das Impressum, aber die Datenschutzerklärung ist entweder nicht verlinkt oder fehlt ganz. Das ist ein rechtliches Risiko, das sich einfach vermeiden lässt.

Was Header, Body und Footer technisch bedeuten

Kurzer Einblick für alle, die einmal gehört haben, dass Websites aus HTML bestehen: Die drei Bereiche entsprechen tatsächlich eigenen HTML-Elementen. Der Header ist das <header>-Element, der Hauptinhalt steckt im <main>-Element, und der Footer wird durch <footer> ausgezeichnet.

Warum ist das relevant für jemanden, der gar kein Code schreibt? Weil Suchmaschinen diese Struktur nutzen, um Inhalte zu verstehen. Google weiß, dass der wichtigste Inhalt im <main>-Bereich steht und bewertet ihn entsprechend stärker. Das ist einer der Gründe, warum ein sauber aufgebauter WordPress-Blog besser rankt als eine chaotisch strukturierte Seite - Google liest die Struktur mit.

Wenn Sie mehr darüber erfahren möchten, wie verschiedene Arten von Webseiten aufgebaut sind, oder was eine Firmenwebsite grundsätzlich ausmacht, finden Sie dazu weiterführende Artikel in diesem Blog.

Wie die drei Bereiche zusammenwirken

Die Stärke der Drei-Bereiche-Struktur liegt nicht in den einzelnen Elementen, sondern in ihrem Zusammenspiel. Der Header schafft Orientierung und setzt einen ersten Impuls. Der Body liefert Inhalte, die informieren und überzeugen. Der Footer rundet ab, bietet Sicherheit durch rechtliche Transparenz und gibt dem Besucher eine letzte Möglichkeit zur Aktion.

Eine Analogie aus dem Alltag: Stellen Sie sich eine gut aufgeräumte Arztpraxis vor. An der Eingangstür hängt der Praxisname und die Öffnungszeiten (Header). Im Wartezimmer und den Behandlungsräumen findet die eigentliche Arbeit statt (Body). An der Rezeption beim Hinausgehen gibt es alle Unterlagen und Kontaktinformationen (Footer). Jeder weiß, was er wo findet - ohne nachfragen zu müssen.

Genau dieses Prinzip funktioniert auf einer gut aufgebauten Unternehmenswebsite. Für Unternehmen, die ihre Website professionell aufsetzen oder optimieren lassen wollen, ist das Verständnis dieser Grundstruktur der erste Schritt zu einer Seite, die tatsächlich Ergebnisse bringt. Wer mit einem klaren Konzept in die Planung geht, vermeidet kostspielige Nacharbeiten und bekommt eine Website, die seinen Besuchern genau das gibt, was sie suchen.

Der Aufwand, sich diese Grundlagen einmal zu erarbeiten, zahlt sich aus - bei der Kommunikation mit der Agentur, bei der inhaltlichen Planung und beim Verständnis dafür, warum bestimmte Designentscheidungen so getroffen werden, wie sie getroffen werden.

Häufige Fragen

Was ist der Unterschied zwischen Header und Hero?

Der Header ist der schmale Streifen ganz oben, der auf jeder Unterseite gleich bleibt - er enthält Logo, Menü und oft einen CTA-Button. Der Hero ist der große Einstiegsbereich direkt darunter auf der Startseite, mit einem Bild oder Video und einem zentralen Satz, der erklärt, was das Unternehmen anbietet. Der Header ist eine Navigationshilfe, der Hero ist eine Werbebotschaft.

Wie viele Menüpunkte sollte die Hauptnavigation haben?

Bewährt haben sich fünf bis sieben Punkte. Mehr überfordert Besucher und lässt die Navigation unruhig wirken. Weniger als vier Punkte können dagegen wichtige Bereiche verstecken. Wer mehr Seiten hat, kann mit Untermenüs oder Mega-Menüs arbeiten - die oberste Ebene bleibt aber übersichtlich.

Muss das Impressum zwingend im Footer stehen?

Es gibt keine Vorschrift, die das Impressum ausschließlich im Footer verlangt. Entscheidend ist, dass es von jeder Unterseite aus mit maximal zwei Klicks erreichbar und klar als 'Impressum' beschriftet ist. Der Footer ist schlicht der Platz, an dem Besucher das Impressum zuerst suchen - deshalb ist er die praktischste Lösung.

Was ist ein Call-to-Action und warum gehört er in den Header?

Ein Call-to-Action (kurz CTA) ist eine Schaltfläche oder ein Link, der zu einer konkreten Handlung auffordert - zum Beispiel 'Jetzt Angebot anfordern' oder 'Termin vereinbaren'. Im Header ist er besonders wirksam, weil er sofort sichtbar ist, bevor der Besucher überhaupt gescrollt hat. So geht kein Kontaktpotenzial verloren, auch wenn jemand nur kurz vorbeischaut.

Was gehört nicht in den Header?

Alles, was ablenkt und nicht zur sofortigen Orientierung beiträgt. Dazu gehören lange Texte, viele Bilder, Slider mit bewegten Inhalten, Kontaktformulare oder zu viele Social-Media-Icons. Der Header soll klar und ruhig wirken - je weniger Elemente, desto schneller findet sich der Besucher zurecht.

Wie unterscheiden sich Header und Body aus Sicht der Suchmaschinen?

Suchmaschinen wie Google lesen die Seitenstruktur und werten inhaltlich schwere Bereiche unterschiedlich. Der Hauptinhalt im Body - besonders die H1-Überschrift und die ersten Absätze - wird stärker gewichtet als Elemente in Header oder Footer. Das bedeutet: Die wichtigsten Keywords und Aussagen gehören in den Body, nicht in Logo-Alt-Texte oder Footer-Links.

Muss der Footer auf jeder Unterseite gleich aussehen?

Ja, der Footer ist in der Regel auf allen Unterseiten identisch. Das ist kein Fehler, sondern Absicht: Besucher finden Impressum, Datenschutz und Kontakt immer am gleichen Ort. Manche Websites passen den Footer leicht an - etwa indem Landing Pages keinen Footer-Bereich mit Wegführungslinks haben. Das ist eine bewusste Ausnahme, keine Norm.