Der Kopfbereich enthält nichts Sichtbares und trotzdem das meiste, was über die Darstellung entscheidet. Der Browser liest ihn zuerst und richtet danach alles Weitere ein.
Ein vollständiger Kopfbereich
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seitentitel – Markenname</title>
<meta name="description" content="Ein Satz, der diese Seite von anderen unterscheidet.">
<link rel="canonical" href="https://example.org/seite">
<link rel="stylesheet" href="/css/stil.css">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
</head>Mehr braucht die überwiegende Zahl der Seiten nicht. Was in älteren Anleitungen zusätzlich auftaucht – author, revisit-after, distribution –, wird von keiner Suchmaschine ausgewertet.
Die Reihenfolge ist nicht beliebig
Die Zeichenkodierung gehört an den Anfang, und zwar innerhalb der ersten 1024 Byte des Dokuments. Findet der Browser sie dort nicht, beginnt er zu raten – und bei falschem Rateergebnis erscheinen Umlaute als Zeichensalat, der sich später nicht mehr korrigieren lässt, ohne die Seite neu zu laden.
Danach folgt sinnvollerweise die Viewport-Angabe, dann der Titel. Stylesheets kommen vor Skripten.
Warum der Kopfbereich die Ladezeit bestimmt
Ein Stylesheet blockiert das Zeichnen der Seite, bis es geladen ist. Das ist gewollt – sonst blitzt kurz unformatierter Text auf. Es bedeutet aber: Jede zusätzliche Datei im Kopfbereich verlängert die Zeit bis zum ersten sichtbaren Inhalt, und Dateien von fremden Servern tun das um deren Antwortzeit, auf die man keinen Einfluss hat.
Skripte im Kopfbereich brauchen deshalb defer oder async:
<script src="/js/app.js" defer></script>
<script src="/js/zaehler.js" async></script>Mit defer bleibt die Reihenfolge mehrerer Skripte erhalten – nötig, sobald eines auf einem anderen aufbaut. Mit async läuft, was zuerst geladen ist; das eignet sich für eigenständige Skripte wie Zählwerkzeuge.
head und header sind verschiedene Dinge
Der Kopfbereich head ist unsichtbar und enthält Angaben über das Dokument. Das header-Element steht im Rumpf, ist sichtbar und leitet einen Abschnitt ein – meist mit Logo und Navigation. Die Namensähnlichkeit ist eine der häufigsten Verwechslungen unter Einsteigern.
Prüfen, was tatsächlich ankommt
Im Browser genügt ein Blick in die Entwicklerwerkzeuge: Der Reiter mit dem Seitenquelltext zeigt die ausgelieferte Datei, die Elementansicht den fertig aufgebauten Baum. Weichen beide im Kopfbereich voneinander ab, hat meist ein Skript etwas ergänzt – bei Redaktionssystemen mit vielen Erweiterungen ein häufiger Fall.