Der Head-Tag dient zur Auszeichnung des Kopfbereiches (engl. Header) im HTML-Code einer Internetseite. Während die eigentlichen Inhalte einer Webseite im Body eines HTML-Dokumentes notiert sind, befinden sich im Header zusätzliche Angaben für die Darstellung und Verarbeitung der Internetseite, die nicht im Hauptfenster des Browsers dargestellt werden. Dazu gehören unter anderem der Titel der Webseite, Meta-Angaben zum Urheber und Erstellungsdatum der Seite, sowie Scripte und Links zur Einbindung externer Ressourcen. Um mögliche Verwechselungen von vornherein zu vermeiden: Die Verwendung des Begriffes Header ist nicht immer eindeutig, denn er wird auch häufig für den Kopfbereich im Layout einer Internetseite verwendet. Hier geht es ausschließlich um den, also den Header im Quellcode eines HTML-Dokumentes.
Wie der Name Header (Kopfbereich) schon sagt, befindet sich der am Anfang eines HTML-Dokumentes. Vor ihm steht lediglich die sogenannte Dokumententypdeklaration, die ausweist, in welcher HTML-Version das Dokument verfasst ist. Die Elemente im Header werden wie alle HTML-Elemente durch Tags ausgezeichnet. Dabei gelten für den Header spezielle Regeln: Es gibt nur sieben Arten von Elementen (HTML-Tags) die im Header verwendet werden dürfen, von denen aber nur eines vorkommen muss – der Title-Tag.
Mögliche Elemente im Header
Das wichtigste Element im Header ist der Title-Tag. Es enthält den Titel der Internetseite und dient dazu, den Titel der Seite im Fensterrahmen des Browsers – beziehungsweise in den Registerkarten bei eingeschaltetem Tabbed Browsing – anzuzeigen. Der Title-Tag wird außerdem beim Anlegen von Lesezeichen abgefragt und dient Suchmaschinen zur Indexierung der Internetseite. Der Title-Tag dient somit auch der Suchmaschinenoptimierung (SEO) der Webseite.
Alle weiteren möglichen Elemente im Header sind nicht zwingend vorgeschrieben, erfüllen aber mehr oder weniger nützliche Aufgaben, wie die sog. Meta-Tags. Die Meta-Elemente im waren ursprünglich dazu gedacht, den Suchmaschinen die Indexierung von Webseiten zu erleichtern. Sie können Angaben zum Autor, zum Erstellungsdatum oder eine kurze Beschreibung des Inhalts enthalten. Daneben gibt es auch die Möglichkeit, Keywords für die Seite festzulegen, also die Suchbegriffe, unter denen die Seite vom Anwender gefunden werden soll. Da diese Funktion aber häufig missbraucht wurde, spielt sie für die Suchmaschinenoptimierung einer Internetseite heute kaum noch eine Rolle. Die Suchmaschinen generieren heutzutage die Keywords aus dem Inhalt einer Webseite und ignorieren dabei die Keywords in den Meta-Tags weitestgehend.
Das Base-Element erfüllt zwei Funktionen. Es gibt zum einen die Adressbasis für alle relativen Verknüpfungen in einem HTML-Dokument vor. Möchte man Bilder einbinden, die auf dem gleichen Server wie die Internetseite liegen, genügt zur Verlinkung der relative Pfad zur Bilddatei ohne Angabe der kompletten Internetadresse. Die Verwendung des Base-Elements kann aber zu Fehlern führen, wenn man Dokumente auf anderen Servern verwenden möchte oder in ein anderes Unterverzeichnis verschiebt. Basiert das Layout einer Internetseite aus Frames (der Inhalt wird auf mehre Bildschirmfenster verteilt) dient das Base-Element dazu, die Zielfensterbasis zu definieren. Damit wird festgelegt, in welchem Bildschirmfenster aufgerufene Links dargestellt werden. So kann man in einem Bildschirmfenster eine Navigationsleiste anzeigen, während die verlinkten Inhalte in einem anderen Fenster dargestellt werden.
Wird auf einer Webseite eine Scriptsprache wie JavaScript verwendet, wird der Quellcode des Scripts meist über das Script-Element im des Dokuments eingebunden. Obwohl es keine Vorschriften dafür gibt, in welchem Bereich einer Internetseite ein Script notiert wird, hat es Vorteile Scripte im zu definieren. JavaScript-Objekte werden dadurch beim Aufruf der Seite vom Browser direkt geladen und stehen somit schneller zu Verfügung.
CSS-Auszeichnung im Header
Das Layout einer Internetseite wird heutzutage meist über Stylesheets (CSS) definiert. Das spielt bei der Verwendung von Stylesheets eine entscheidende Rolle. CSS steht für engl. Cascading Style Sheets, was übersetzt so viel heißt wie ‚hintereinander verschachtelte Formatvorlagen‘.
Eine wesentliche Eigenschaft von Stylesheets ist, dass einmal gemachte Layoutvorgaben nach bestimmten Regeln durch andere überschrieben werden können. Entscheidend ist hier, an welcher Stelle eine Regel definiert wird. Stylesheets werden in der Regel in einer eigenen Datei notiert, die über das Link-Element im Header-Tag (HTML) in die Webseite eingebunden wird. Man kann den CSS-Code über das Style-Element aber auch direkt im Header notieren. Die Einbindung einer externen Datei über das Link-Element hat den Vorteil, dass man mit einer einzigen Stylesheet-Datei das Layout eines kompletten Internet-Auftrittes steuern kann. Schreibt man die CSS-Vorgaben direkt in den Header, muss man diese Vorgaben für jede neue Seite eines Projektes kopieren und bei Änderungen im Layout den Code in jeder Seite anpassen.
Es kann aber durchaus Gründe geben, CSS-Regeln direkt im Header zu notieren. Zum Beispiel wenn man eine bestimmte Eigenschaft auf nur einer einzigen Seite ändern möchte. Hat man in der systemweiten CSS-Datei als Hintergrundfarbe blau eingestellt, kann man die Vorgabe direkt im durch eine andere Farbe überschreiben. CSS-Regeln, die direkt im Header notiert sind, haben eine höhere Priorität als CSS-Regeln in einer externen CSS-Datei. Möchte man nur ein einzelnes Element auf einer Internetseite, z.B. die Größe einer Überschrift, abweichend von den Vorgaben in der CSS-Datei und im Header definieren, kann man Stylesheets auch direkt im HTML-Code verwenden.
Zusammenfassung
Der Head-Tag im HTML-Code einer Webseite enthält wichtige Informationen, die für die Darstellung und Verarbeitung der Seite erforderlich sind, jedoch nicht im Hauptfenster des Browsers angezeigt werden. Er umfasst verschiedene Elemente wie den Title-Tag, Meta-Informationen und Skripte. Dabei ist der Title-Tag das einzige obligatorische Element und spielt eine wesentliche Rolle in der Suchmaschinenoptimierung (SEO).
Zusätzliche Elemente im Header, wie Meta-Tags, bieten weitere Informationen über die Webseite, sind jedoch für moderne Suchmaschinen weniger relevant. Das Base-Element im Header hilft bei der Verknüpfung von relativen Pfaden und kann besonders in Frame-basierten Layouts nützlich sein.
Webentwickler können Scriptsprachen wie JavaScript über das Script-Element im Head-Bereich einbinden, um eine schnellere Verfügbarkeit beim Laden der Seite zu gewährleisten. Der Einsatz von CSS im Head-Tag ermöglicht es, das Layout einer Webseite zu gestalten, entweder durch Verlinkung einer externen Stylesheet-Datei oder durch direkte Eingabe im Header. Letzteres bietet mehr Flexibilität bei der Gestaltung einzelner Webseiten.
Häufige Fragen und Antworten
Was ist der Head-Tag im HTML-Code einer Webseite?
Der Head-Tag dient zur Auszeichnung des Kopfbereiches (engl. Header) im HTML-Code einer Internetseite. Er enthält wichtige Informationen für die Darstellung und Verarbeitung der Seite, die jedoch nicht im Hauptfenster des Browsers angezeigt werden. Dazu gehören der Titel der Webseite, Meta-Angaben und Links zu externen Ressourcen.
Welche Elemente können im Header verwendet werden?
Im Header können verschiedene Elemente verwendet werden, darunter der Title-Tag, Meta-Tags wie Keywords, Beschreibung oder Autor, das Base-Element für relative Verknüpfungen und das Script-Element für die Einbindung von JavaScript. Auch die CSS-Auszeichnung des Layouts kann im Header definiert werden.
Was ist der Zweck des Title-Tags im Header?
Der Title-Tag ist das wichtigste Element im Header und enthält den Titel der Internetseite. Er wird im Fensterrahmen des Browsers und in den Registerkarten angezeigt und dient auch dazu, die Seite in Lesezeichen zu benennen und von Suchmaschinen indexiert zu werden. Der Title-Tag ist daher entscheidend für die Suchmaschinenoptimierung (SEO) der Webseite.