HTMLWiki.de: Der head-Bereich
< HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI
Menü

[ START ] [ TUTORIAL ] [ HTML ] [ CSS ] [ KI ] [ SPIELWIESE ] [ SITEMAP ]

Der head-Bereich: Der Kopf des Dokuments

vom von

Der <head> ist der Teil deiner Seite den Besucher nie direkt sehen. Hier stehen Informationen über das Dokument: wie es heißt, wie es kodiert ist, welches Stylesheet geladen werden soll. Man kann ihn sich wie den Briefkopf eines Dokuments vorstellen, alles Organisatorische steht oben, der eigentliche Inhalt kommt danach im <body>.

Ein typischer head

HTML-Code

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Kuchenrezepte für Anfänger</title>
    <meta name="description" content="Einfache Kuchenrezepte die immer gelingen.">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
</head>

Die Bausteine im Einzelnen

  • <meta charset="utf-8"> legt die Zeichenkodierung fest und sollte möglichst weit oben stehen, am besten als erstes Element im head. Sonst rät der Browser und rät bei Umlauten gern falsch.
  • <title> ist Pflicht. Der Titel erscheint im Browser-Tab, in Lesezeichen und als Überschrift in Suchergebnissen. Jede Seite deiner Website sollte einen eigenen, aussagekräftigen Titel haben.
  • Meta-Angaben wie viewport und description bekommen eine eigene Seite, davon gibt es nämlich einige.
  • <link> verknüpft externe Dateien mit dem Dokument, allen voran das CSS-Stylesheet und das Favicon (das kleine Symbol im Tab). Wie man CSS genau einbindet, steht im Artikel CSS einbinden.
  • <style> und <script> dürfen ebenfalls in den head, damit kann man CSS und JavaScript direkt im Dokument unterbringen. Für kleine Experimente okay, bei richtigen Projekten sind externe Datein meist die bessere Wahl.

Was NICHT in den head gehört

Sichtbarer Inhalt. Keine Überschriften, keine Absätze, keine Bilder. Browser versuchen solche Ausrutscher zwar zu reparieren, indem sie den Inhalt in den body verschieben, aber verlassen sollte man sich darauf nicht. Wenn im Browserfenster etwas auftaucht was du oben im head notiert hast, ist genau das passiert.

Merksatz: Der head beschreibt die Seite, der body zeigt sie. Wer das einmal verinnerlicht hat macht hier keine Fehler mehr.

Weiter im Lernpfad: Meta-Tags · Verwandt: Das Grundgerüst