Arne seine Homepage | PHP Tutorial: header.php und footer.php richtig einsetzen

# 1. Die Grundidee

Bei einer PHP-Webseite gibt es meistens Bereiche, die auf vielen Seiten gleich bleiben: Logo, Navigation, CSS-Einbindung, Seitenlayout, Fußbereich, Copyright, JavaScript-Dateien und manchmal auch linke oder rechte Spalten. Statt diesen HTML-Code in jeder einzelnen Datei zu wiederholen, lagerst du ihn in header.php und footer.php aus.

Die eigentliche Seite, zum Beispiel index.php, schreibt dann nur noch den Inhalt, der wirklich zu dieser Seite gehört. Oben wird der Header eingebunden, unten der Footer.

Bild 1: Die Webseite entsteht wie ein Sandwich. Der Header kommt oben, der Seiteninhalt in die Mitte, der Footer unten.

Merksatz: header.php startet das wiederverwendbare Layout, die Inhaltsseite füllt die Mitte, und footer.php beendet das Layout sauber.

# 2. Warum macht man das?

Weniger Wiederholung

Einmal ändern, überall sichtbar

Ändert sich das Menü, musst du nicht jede Datei anfassen. Du änderst nur header.php, und alle Seiten nutzen automatisch die neue Navigation.

Sauberer Aufbau

Inhalt und Rahmen getrennt

Die Inhaltsseiten bleiben übersichtlich. In index.php steht wirklich nur das, was zur Startseite gehört.

Schneller arbeiten

Neue Seiten entstehen schneller

Für eine neue Seite kopierst du nur ein kleines Grundgerüst und fügst deinen Inhalt ein.

Einheitliches Design

Alle Seiten sehen gleich aus

Header, Navigation, Seitenleisten und Footer bleiben überall identisch. Das wirkt sauberer und professioneller.

# 3. Das einfachste Grundprinzip

Die einfachste Variante besteht aus drei Dateien: header.php, footer.php und einer Inhaltsseite wie index.php.

Bild 2: PHP setzt die Dateien serverseitig zusammen. Der Browser bekommt am Ende eine fertige HTML-Seite.

header.php

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meine Webseite</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="site-header">
    <h1>Meine Webseite</h1>
    <nav>
        <a href="index.php">Start</a>
        <a href="kontakt.php">Kontakt</a>
    </nav>
</header>

<main class="site-main">

index.php

<?php require_once __DIR__ . '/header.php'; ?>

<h2>Startseite</h2>
<p>Willkommen auf meiner Webseite.</p>

<?php require_once __DIR__ . '/footer.php'; ?>

footer.php

</main>

<footer class="site-footer">
    <p>&copy; <?= date('Y') ?> Meine Webseite</p>
</footer>

</body>
</html>

Wichtig ist: In diesem Beispiel öffnet header.php den Bereich <main>. Deshalb muss footer.php diesen Bereich mit </main> wieder schließen.

# 4. Header und Footer teilen die Seite

Der Begriff „Header“ bedeutet nicht immer nur der sichtbare Kopfbereich der Webseite. In vielen PHP-Projekten ist header.php eher der obere Teil der kompletten HTML-Struktur. Dieser obere Teil kann auch bereits Wrapper, Container, Navigation oder Seitenleisten öffnen.

Bild 3: Header und Footer müssen zusammenpassen. Was oben geöffnet wird, muss unten wieder geschlossen werden.

Häufiger Fehler: In header.php werden mehrere <div>-Container geöffnet, aber in footer.php wird einer vergessen. Dann verschiebt sich das Layout oder der HTML-Code ist ungültig.

# 5. Häufige Varianten

Es gibt nicht nur eine richtige Art, header.php und footer.php zu verwenden. Entscheidend ist, dass deine Struktur logisch bleibt und die geöffneten HTML-Tags sauber geschlossen werden.

Variante A: Nur oben und unten

Diese Variante ist ideal für einfache Webseiten ohne Seitenleiste.

<?php require_once __DIR__ . '/header.php'; ?>

<h2>Meine Seite</h2>
<p>Hier steht der Inhalt.</p>

<?php require_once __DIR__ . '/footer.php'; ?>

Variante B: Header öffnet auch eine linke Seitenleiste

Bei Adminbereichen oder Dashboards wird oft links eine Navigation angezeigt. Dann kann header.php nicht nur oben etwas ausgeben, sondern auch den linken Bereich öffnen.

Bild 4: Der Header kann oben und links liefern. Der eigentliche Inhalt steht dann rechts daneben.

header.php mit linker Seitenleiste

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Adminbereich</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="admin-topbar">
    <strong>Adminbereich</strong>
</header>

<div class="admin-layout">
    <aside class="admin-sidebar">
        <nav>
            <a href="admin.php">Übersicht</a>
            <a href="einstellungen.php">Einstellungen</a>
            <a href="logout.php">Logout</a>
        </nav>
    </aside>

    <main class="admin-content">

footer.php passend dazu

    </main>
</div>

<footer class="admin-footer">
    <small>&copy; <?= date('Y') ?> Adminbereich</small>
</footer>

</body>
</html>

Variante C: Header oben, Sidebar als eigene Datei

Bei größeren Projekten ist es oft übersichtlicher, nicht alles in header.php zu packen. Dann kann der Header den Kopfbereich ausgeben, die Sidebar liegt in sidebar.php, und der Footer schließt wieder alles.

<?php require_once __DIR__ . '/inc/header.php'; ?>
<?php require_once __DIR__ . '/inc/sidebar.php'; ?>

<h2>Dashboard</h2>
<p>Hier steht der Inhalt des Dashboards.</p>

<?php require_once __DIR__ . '/inc/footer.php'; ?>

Variante D: Rechte Spalte zusätzlich

Eine Webseite kann auch links Navigation, in der Mitte Inhalt und rechts zusätzliche Informationen anzeigen. Dann öffnet der Header häufig den kompletten Rahmen, während die Inhaltsseite nur den Hauptinhalt liefert.

<body>
<header>...</header>

<div class="layout-three-columns">
    <aside class="left">Navigation</aside>
    <main class="content">
        <!-- Hier beginnt der Inhalt der jeweiligen Seite -->

        <!-- Hier endet der Inhalt der jeweiligen Seite -->
    </main>
    <aside class="right">Zusatzinfos</aside>
</div>

<footer>...</footer>
</body>

# 6. Empfohlene Ordnerstruktur

Für kleine Projekte kannst du header.php und footer.php direkt neben index.php legen. Für sauberere Projekte ist ein inc-Ordner sinnvoll.

Bild 5: Eine klare Struktur hilft dir später beim Erweitern und Warten deiner PHP-Seite.

/meine-webseite
├── index.php
├── kontakt.php
├── impressum.php
├── css/
│   └── style.css
└── inc/
    ├── config.php
    ├── header.php
    ├── navigation.php
    ├── sidebar.php
    └── footer.php

Der Ordnername inc steht meistens für „includes“. Dort liegen Dateien, die von anderen PHP-Dateien eingebunden werden.

# 7. Sichere und stabile Pfade mit `DIR`

Beim Einbinden solltest du dich nicht auf relative Browserpfade verlassen. Verwende für PHP-Includes am besten __DIR__. Dadurch wird der Pfad vom aktuellen Dateisystem-Ort der PHP-Datei aus berechnet.

Nicht ideal: require_once 'inc/header.php';
Das kann funktionieren, wird aber bei verschachtelten Ordnern schneller fehleranfällig.

Besser: require_once __DIR__ . '/inc/header.php';
So ist klar, von welchem Ordner aus die Datei geladen wird.

Befehl	Verhalten	Typischer Einsatz
`include`	Gibt eine Warnung aus, wenn die Datei fehlt. Das Script läuft weiter.	Optionale Bausteine.
`require`	Bricht das Script ab, wenn die Datei fehlt.	Wichtige Layout- oder Config-Dateien.
`include_once`	Bindet die Datei höchstens einmal ein.	Optionale Dateien, die nicht doppelt geladen werden sollen.
`require_once`	Bindet die Datei höchstens einmal ein und bricht bei Fehler ab.	Header, Footer, Config, Funktionen.

Für header.php, footer.php, Konfigurationen und Funktionsdateien ist require_once meistens die beste Wahl.

# 8. Seitentitel, aktive Navigation und Meta-Daten übergeben

Oft soll jede Seite einen eigenen Titel haben. Dafür setzt du vor dem Header Variablen. Der Header liest diese Variablen und verwendet sie im HTML-Kopf oder in der Navigation.

kontakt.php

<?php
$pageTitle = 'Kontakt';
$pageDescription = 'Kontaktformular und Kontaktdaten meiner Webseite.';
$activePage = 'kontakt';

require_once __DIR__ . '/inc/header.php';
?>

<h2>Kontakt</h2>
<p>Schreibe mir gerne eine Nachricht.</p>

<?php require_once __DIR__ . '/inc/footer.php'; ?>

inc/header.php

<?php
$pageTitle = $pageTitle ?? 'Meine Webseite';
$pageDescription = $pageDescription ?? 'Willkommen auf meiner Webseite.';
$activePage = $activePage ?? '';
?>

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="<?= htmlspecialchars($pageDescription, ENT_QUOTES, 'UTF-8') ?>">
    <title><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></title>
</head>
<body>

<nav>
    <a href="index.php" class="<?= $activePage === 'start' ? 'active' : '' ?>">Start</a>
    <a href="kontakt.php" class="<?= $activePage === 'kontakt' ? 'active' : '' ?>">Kontakt</a>
</nav>

<main>

Mit ?? setzt du Standardwerte. Wenn eine Inhaltsseite keinen eigenen Titel definiert, verwendet der Header automatisch den Standardtitel.

# 9. include Dateien vor direktem Aufruf schützen

Eine header.php ist normalerweise kein vollständiger Seitenaufruf, sondern nur ein Baustein. Du kannst verhindern, dass jemand sie direkt im Browser aufruft.

index.php

<?php
define('AH_INTERN', true);
$pageTitle = 'Startseite';

require_once __DIR__ . '/inc/header.php';
?>

<h2>Startseite</h2>
<p>Willkommen.</p>

<?php require_once __DIR__ . '/inc/footer.php'; ?>

inc/header.php

<?php
if(!defined('AH_INTERN')) {
    http_response_code(403);
    exit('Direkter Zugriff nicht erlaubt.');
}
?>

<!doctype html>
<html lang="de">
...

Das ist besonders sinnvoll bei Dateien wie config.php, functions.php, header.php oder footer.php.

# 10. Sessions, Cookies und Weiterleitungen: Reihenfolge beachten

Alles, was HTTP-Header verändert, muss vor der ersten sichtbaren Ausgabe passieren. Dazu gehören zum Beispiel session_start(), setcookie() und header('Location: ...').

Wichtig: Wenn header.php bereits HTML ausgibt, ist es für Weiterleitungen oder Sessions oft zu spät. Starte Sessions und prüfe Logins deshalb vor der HTML-Ausgabe.

geschuetzte-seite.php

<?php
session_start();

define('AH_INTERN', true);

if(empty($_SESSION['admin_login'])) {
    header('Location: login.php');
    exit;
}

$pageTitle = 'Geschützter Bereich';
require_once __DIR__ . '/inc/header.php';
?>

<h2>Geschützter Bereich</h2>
<p>Du bist eingeloggt.</p>

<?php require_once __DIR__ . '/inc/footer.php'; ?>

# 11. Komplettes mini Beispiel

Dieses Beispiel zeigt eine kleine Webseite mit Header, Navigation, Inhalt, Footer, dynamischem Titel und aktivem Menüpunkt.

inc/header.php

<?php
if(!defined('AH_INTERN')) {
    http_response_code(403);
    exit('Direkter Zugriff nicht erlaubt.');
}

$pageTitle = $pageTitle ?? 'Meine Webseite';
$activePage = $activePage ?? '';
?>

<!doctype html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="site-header">
    <div class="wrapper">
        <h1>Meine Webseite</h1>
        <nav class="site-nav">
            <a href="index.php" class="<?= $activePage === 'start' ? 'active' : '' ?>">Start</a>
            <a href="ueber-mich.php" class="<?= $activePage === 'ueber' ? 'active' : '' ?>">Über mich</a>
            <a href="kontakt.php" class="<?= $activePage === 'kontakt' ? 'active' : '' ?>">Kontakt</a>
        </nav>
    </div>
</header>

<main class="site-main wrapper">

inc/footer.php

</main>

<footer class="site-footer">
    <div class="wrapper">
        <p>&copy; <?= date('Y') ?> Meine Webseite</p>
    </div>
</footer>

</body>
</html>

index.php

<?php
define('AH_INTERN', true);
$pageTitle = 'Startseite';
$activePage = 'start';

require_once __DIR__ . '/inc/header.php';
?>

<h2>Willkommen</h2>
<p>Das ist die Startseite meiner Webseite.</p>

<?php require_once __DIR__ . '/inc/footer.php'; ?>

kontakt.php

<?php
define('AH_INTERN', true);
$pageTitle = 'Kontakt';
$activePage = 'kontakt';

require_once __DIR__ . '/inc/header.php';
?>

<h2>Kontakt</h2>
<p>Hier findest du meine Kontaktdaten.</p>

<?php require_once __DIR__ . '/inc/footer.php'; ?>

css/style.css

body {
    margin: 0;
    font-family: Arial, sans-serif;
    color: #222;
    background: #f5f5f5;
}

.wrapper {
    width: min(1100px, 92%);
    margin: 0 auto;
}

.site-header,
.site-footer {
    background: #212121;
    color: #fff;
}

.site-header {
    padding: 1.5rem 0;
}

.site-nav a {
    display: inline-block;
    margin-right: 1rem;
    color: #fff;
    text-decoration: none;
}

.site-nav a.active {
    color: #2bbbad;
    font-weight: bold;
}

.site-main {
    min-height: 50vh;
    padding: 2rem 0;
}

.site-footer {
    padding: 1rem 0;
}

# 12. Typische Fehler und Lösungen

Problem	Ursache	Lösung
„Headers already sent“	Vor `session_start()`, `setcookie()` oder Weiterleitung wurde schon HTML ausgegeben.	Session, Cookies und Weiterleitungen vor `require_once header.php` ausführen.
Layout ist verschoben	Ein öffnendes `<div>` wird nicht geschlossen oder zu früh geschlossen.	Header und Footer als zusammengehörendes Paar prüfen.
CSS lädt nicht	Falscher Browserpfad zur CSS-Datei.	Im HTML-Link vom Webpfad ausgehen, nicht vom PHP-Dateisystempfad.
Include-Datei wird nicht gefunden	Relativer Pfad passt nicht zur aktuellen Datei.	`require_once __DIR__ . '/inc/header.php';` verwenden.
Direkter Aufruf von `header.php` zeigt halbe Seite	Include-Datei ist öffentlich aufrufbar.	Mit einer Konstante wie `AH_INTERN` schützen.

# 13. Gute Regeln für saubere Projekte

Lege wiederverwendbare Bausteine in einen eigenen Ordner, zum Beispiel inc/.
Nutze für PHP-Includes stabile Dateisystempfade mit __DIR__.
Setze Seitentitel, aktive Menüpunkte und Meta-Daten vor dem Header.
Gib Variablen im Header immer mit htmlspecialchars() aus.
Starte Sessions und mache Weiterleitungen vor der ersten HTML-Ausgabe.
Achte darauf, dass alle in header.php geöffneten Container in footer.php geschlossen werden.
Packe nicht zu viel Programmlogik in den Header. Der Header sollte hauptsächlich Layout ausgeben.
Wenn ein Layout größer wird, teile es zusätzlich in navigation.php, sidebar.php oder modal.php auf.

# 14. Fazit

header.php und footer.php sind einfache, aber sehr wichtige Werkzeuge in klassischen PHP-Projekten. Sie sparen Wiederholung, machen deine Dateien übersichtlicher und sorgen dafür, dass dein Layout auf allen Seiten einheitlich bleibt.

Die wichtigste Denkweise ist: Der Header öffnet den Rahmen, die Inhaltsseite füllt ihn, und der Footer schließt ihn wieder. Ob dieser Rahmen nur oben und unten liegt oder zusätzlich links, rechts oder in mehreren Containern arbeitet, hängt vom jeweiligen Projekt ab.

# 1. Die Grundidee

# 2. Warum macht man das?

Einmal ändern, überall sichtbar

Inhalt und Rahmen getrennt

Neue Seiten entstehen schneller

Alle Seiten sehen gleich aus

# 3. Das einfachste Grundprinzip

# 4. Header und Footer teilen die Seite

# 5. Häufige Varianten

Variante A: Nur oben und unten

Variante B: Header öffnet auch eine linke Seitenleiste

Variante C: Header oben, Sidebar als eigene Datei

Variante D: Rechte Spalte zusätzlich

# 6. Empfohlene Ordnerstruktur

# 7. Sichere und stabile Pfade mit __DIR__

# 8. Seitentitel, aktive Navigation und Meta-Daten übergeben

# 9. include Dateien vor direktem Aufruf schützen

# 10. Sessions, Cookies und Weiterleitungen: Reihenfolge beachten

# 11. Komplettes mini Beispiel

# 12. Typische Fehler und Lösungen

# 13. Gute Regeln für saubere Projekte

# 14. Fazit

Kommentar schreiben

# 7. Sichere und stabile Pfade mit `DIR`