Head und Header einer Webseite

Head oder Header – wo ist der Unterschied?

Eine Webseite hat beides. Der Head ist unsichtbar und steht nur im Quelltext. Der Header ist der sichtbare obere Teil der Seite.

Verwirrend wird es, weil der Head technisch vor dem Header kommt und im allgemeinen Sprachgebrauch oft mitgemeint ist. Wenn jemand vom „Header" spricht, kann beides gemeint sein – im Zweifel hilft die Rückfrage, ob man es sehen kann.

Der Head-Bereich

Der Head ist der erste von zwei Teilen jeder HTML-Seite. Er steht zwischen <head> und </head> und enthält nichts, was man auf der Seite sehen kann.

Ansehen kannst du ihn trotzdem: Rechtsklick auf eine freie Stelle, dann „Seitenquelltext anzeigen". Ganz oben steht er.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Head und Header einer Webseite</title>
    <meta name="description" content="Der Unterschied zwischen …">
    <link rel="stylesheet" href="assets/css/stil.css">
</head>
<body>
    … hier beginnt alles Sichtbare …
</body>
</html>

Seine Aufgabe ist, den Browser vorzubereiten: Was für ein Dokument kommt, in welcher Sprache, welche Gestaltungsdateien gebraucht werden.

Im Hausvergleich stehen wir hier im Rohbau eines Raums: Welche Dämmung, welche Leitungen, welche Vorbereitungen. Und wie dort gilt: Je mehr in die Wand muss, desto dicker wird sie. Je mehr im Head steht, desto länger dauert es, bis überhaupt etwas zu sehen ist.

Was dort steht und was es bewirkt

Vier Angaben aus dem Head wirken sich unmittelbar darauf aus, wie deine Seite außerhalb deiner Website erscheint:

• <title> – der Text im Browsertab. Und die blaue Überschrift in den Suchergebnissen.
• <meta name="description"> – der Beschreibungstext, den Google unter der Überschrift anzeigt. Kein Rankingfaktor, aber der Satz, an dem entschieden wird, ob geklickt wird.
• <meta name="viewport"> – ohne diese Zeile stellt ein Handy die Seite dar, als wäre es ein Bildschirm. Siehe mobilfreundlich gestalten.
• <meta property="og:image"> – das Vorschaubild, das erscheint, wenn jemand deine Seite auf LinkedIn oder in WhatsApp teilt. Fehlt es, erscheint ein grauer Kasten.

Mehr zu den Angaben im Head steht unter Was sind Meta-Tags?

Der Header-Bereich

Der Header ist der sichtbare obere Teil. Wie er aussieht, ist eine Gestaltungsfrage: mit ausgeklappter Navigationsleiste oder Menüsymbol, mit Logo, mit Suchfeld. Darunter folgt in der Regel die Hauptüberschrift oder ein großes Bild.

Wichtig ist vor allem eines: Er bleibt gleich. Auf jeder Seite dieser Website sieht der obere Bereich identisch aus, und das ist kein Zufall, sondern der Zweck. Er ist der feste Punkt, an dem sich jemand orientiert, egal wo er gelandet ist.

Zurück zum Haus

Der Header entspricht der Beschaffenheit der Räume. In einem Neubau sind die Wände dünn und aus Gipskarton, im Altbau dick und aus Ziegel, in der Almhütte aus Holz. Keine Variante ist richtiger, aber jede passt zu einem bestimmten Haus.

Und wie beim Haus fällt es auf, wenn man mischt. Einen Marmorboden in einer Almhütte kann man verlegen. Es sieht nur merkwürdig aus.

Kurz zusammengefasst

• Der Head ist Infrastruktur: unsichtbar, im Quelltext, bereitet den Browser vor – und bestimmt, wie deine Seite in Suchergebnissen und beim Teilen aussieht.
• Der Header ist sichtbar, wird einmal gestaltet und gilt für alle Seiten. Er ist der Orientierungspunkt deiner Besucher.