Was ist richtig? Head oder Header? So seltsam es klingt, eine Webseite besitzt beides. Was genau der Unterschied zwischen diesen beiden Ausdrücken ist und warum man auf beides nicht verzichten kann, erkläre ich dir in diesem Artikel.
Hinweis: Bereits in dem Artikel “Aufbau einer Webseite” haben wir als Analogie für bessere Erklärungen ein Haus samt Grundstück übernommen. Das behalte ich so bei. Somit wird manches einfacher und verständlicher.
Head oder Header – wo ist der Unterschied? #
Eine Webseite besitzt einen Head-Bereich (unsichtbar) und einen Header-Bereich (sichtbar). Der Head-Bereich ist allerdings meist im Allgemeinen im Header-Bereich inkludiert. Wenn also jemand von einem Header-Bereich spricht, dann ist der Head-Bereich ein Teil davon.
Doch wo liegt jetzt der Unterschied?
Der Head-Bereich #
Der Head-Bereich ist der unsichtbare Bereich einer Webseite, der als Code verankert ist. Da jede Webseite aus einem Code besteht und dieser gegliedert ist, bezeichnet man den ersten von zwei Teilen, als <head>-Bereich.
Diesen kannst du dir übrigens jederzeit auf jeder Webseite ansehen. Klicke dazu einfach auf einen freien Bereich mit der rechten Maustaste und wähle den Eintrag “Seitenquelle” oder “Seitenquelltext ansehen”
Der Head-Bereich erstreckt sich von der Markierung <head> bis einschließlich der zweiten Markierung </head>. Das ist übrigens HTML-Code, den du da siehst und lernst.
Der Head-Bereich beinhaltet Informationen wie den Titel der Webseite, damit du im Browser Tab/Browserfenster sehen kannst, wie die Seite heißt. Primär wird der <head>-Bereich dafür genutzt, CSS und JavaScript-Dateien, die für die Interaktivität und die Gestaltung der Webseite zuständig sind, zu laden.
Der <head>-Bereich beinhaltet in der Regel keine Informationen, die du direkt auf einer Webseite sehen kannst, wie z.B. ein Bild oder einen Text. Er hat grundsätzlich die Aufgabe, die Webseite für Browser vorzubereiten und notwendige Dateien zu laden.
Betrachten wir das in unserer Analogie, dann befinden wir uns im Grundgerüst eines Raums. Sprich: Welche Dämmung gibt es? Welche Rohre und Stromleitungen? Vorbereitungen zum Smart Home und solche Sachen. Desto vollgestopfter eine Wand mit solchen Sachen ist, desto mehr muss die Wand tragen und desto dicker werden unter Umständen die Wände. So ähnlich verhält es sich bei einer Webseite. Je mehr Code im <head>-Bereich verankert ist, desto schwerfälliger kann eine Webseite werden.
Der Header-Bereich #
Der Header-Bereich umschreibt den oberen Teil einer Webseite (samt den zuvor erwähnten <head>-Bereich). In dem Artikel Die Gliederung habe ich bereits kurz angerissen, welche Informationen man darunter versteht.
Ein Header kann individuell gestaltet werden. Mit einer sichtbaren Navigationsleiste, mit einer eingeklappten Navigationsleiste, mit einem Logo oder mit einem Suchfeld. Gleich darauf folgt dann die Hauptüberschrift oder der Hauptbereich (mit Foto oder Video) der Webseite. Wie gesagt, das kann stets individuell gestaltet werden.
Grundsätzlich bietet der Header-Bereich eine wichtige und nützliche Orientierungshilfe für deine Besucher. Deshalb wird dieser einmal gestaltet, konfiguriert und auf allen Webseiten und Artikeln angewendet. Sprich, egal welche Seite du auf meiner Webseite ansurfst, der Header-Bereich samt Navigation bleibt identisch und sieht immer gleich aus.
Das ist eine gewisse Sicherheit, die du deinen Besuchern bei der Gestaltung deiner Webseite mitgeben solltest. Bei nahezu allen CMS-Systemen kannst du nur einen Header-Bereich definieren. Solltest du allerdings deine Webseite selbst programmieren, dann ist das zu berücksichtigen.
Was bedeutet das für unsere Analogie, dem Haus? #
Da kann man den Header-Bereich als grundsätzliche Beschaffenheit der Räume betrachten. In einem modernen Haus sind alle Räume modern und die Wände unter Umständen dünn und aus Rigipsplatten. In einem alten Haus, einem Altbau, sind die Wände dick und aus Ziegel. In einer Almhütte hingegen bestehen die Wände aus Holz.
Auch die Gänge bzw. der Flur ist stets ein anderer, aber durchaus passender zum Wohnhaus. Kannst du dir einen teuren Marmorboden in einer alten Almhütte vorstellen? Eben.
A propos, der Header-Bereich bleibt immer gleich: Das ist übrigens auch bei Häusern der Fall, was hin und wieder missachtet wird. Alte Häuser mit moderner Architektur verbinden ist reizvoll, sieht aber im Grunde komisch und merkwürdig aus.
Fazit #
Der <head> Bereich ist ein Infrastrukturbereich, auf deiner Webseite, wie auch in deinem Zimmer. Er beinhaltet Zugang zu Ressourcen und versteckt sich eher im Hintergrund. Der Header-Bereich hingegen ist sichtbar und ein wichtiger Orientierungspunkt für deine Besucher. Wie ein Raum, kann der Header-Bereich individuell gestaltet werden. Mischt man jedoch verschiedene Style, dann wirds unübersichtlich