<head>

Zuletzt aktualisiert am 3. Februar 2026

Das <head>-Element ist der Metadaten-Container deines HTML-Dokuments. Alles, was der Browser über deine Seite wissen muss, aber nicht direkt anzeigt, kommt hierher: der Seitentitel, der Zeichensatz, CSS-Dateien, Favicons und SEO-Informationen. Nutzer sehen den Inhalt des <head> nicht direkt auf der Seite, aber ohne ihn würde deine Webseite weder korrekt dargestellt noch von Suchmaschinen gefunden werden. Auf dieser Seite erfährst du, was in den <head> gehört, was nicht, und welche Elemente du auf keinen Fall vergessen solltest.

Grundlagen

Der <head> ist das erste Kind-Element innerhalb von <html> und kommt immer vor dem <body>. Er enthält keine sichtbaren Inhalte, sondern ausschließlich Metadaten und Verweise auf externe Ressourcen. Du kannst dir den <head> wie das Inhaltsverzeichnis und den Klappentext eines Buches vorstellen: Der Leser sieht sie nicht beim Lesen des Textes, aber sie sind trotzdem wichtig.

  • <head> enthält Metadaten: Informationen über die Seite, nicht den sichtbaren Inhalt
  • Es muss genau ein <title>-Element enthalten: Das ist der Text, der im Browser-Tab angezeigt wird
  • Typische Inhalte: <meta> (Zeichensatz, Viewport, Beschreibung), <link> (CSS, Favicon), <style>, <script>
  • Kein sichtbarer Inhalt gehört in den <head>: keine Texte, Bilder oder Links, die Nutzer sehen sollen. Alles Sichtbare kommt in den <body>

Syntax

Grundsyntax
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webseite</title>
  </head>
  <body>
    <p>Sichtbarer Inhalt</p>
  </body>
</html>
Vorschau

Beispiele

Vollständiger Head-Bereich

Ein gut aufgebauter <head> enthält mindestens den Zeichensatz, den Viewport für mobile Geräte, einen aussagekräftigen Titel und eine Meta-Beschreibung für Suchmaschinen:

Vollständiger Head
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description"
        content="Lerne HTML von Grund auf, einfach und auf Deutsch erklärt.">
  <title>HTML lernen | Programmieren mit Mario</title>
  <link rel="icon" href="/favicon.ico">
</head>
Vorschau

Head mit CSS und JavaScript

Wenn du externe Stylesheets oder Skripte einbinden willst, geschieht das ebenfalls im <head>. CSS-Dateien werden über <link> eingebunden, JavaScript über <script>:

CSS und JavaScript einbinden
<head>
  <meta charset="UTF-8">
  <title>Styled Page</title>
  <link rel="stylesheet" href="style.css">
  <script src="app.js" defer></script>
</head>
Vorschau

Barrierefreiheit

Das <head>-Element ist zwar unsichtbar, beeinflusst die Barrierefreiheit aber indirekt über die darin enthaltenen Elemente:

  • <title> für Screenreader: Der Seitentitel ist das Erste, was ein Screenreader vorliest, wenn eine Seite geladen wird. Ein aussagekräftiger Titel hilft Nutzern, sich zwischen geöffneten Tabs zu orientieren.
  • <meta name="viewport"> und Zoom: Das viewport-Meta-Tag sollte user-scalable nicht auf no setzen und maximum-scale nicht auf 1 beschränken. Viele Nutzer mit Sehbeeinträchtigung sind auf die Zoom-Funktion angewiesen.
  • <meta name="description">: Die Meta-Beschreibung wird in Suchergebnissen angezeigt und von Screenreadern vorgelesen. Eine klare, beschreibende Zusammenfassung hilft allen Nutzern, den Inhalt der Seite einzuschätzen.
  • <link rel="stylesheet">: Die im Head eingebundenen Stylesheets beeinflussen direkt die visuelle Barrierefreiheit: Kontraste, Schriftgrößen und Focus-Styles werden hier gesteuert.

Häufige Fehler

  • <title> vergessen: Ohne <title> zeigt der Browser-Tab nur die URL oder “Untitled” an. Suchmaschinen verwenden den Titel als Hauptüberschrift in den Suchergebnissen. Fehlt er, wird deine Seite schlechter gefunden und sieht unprofessionell aus.

  • Sichtbaren Inhalt in den <head> schreiben: Wenn du versehentlich Text oder Bilder in den <head> packst, versucht der Browser das zu korrigieren und verschiebt den Inhalt in den <body>. Das kann zu unerwartetem Verhalten führen, weil der Browser dein HTML umstrukturiert. Merke: Alles, was Nutzer sehen sollen, kommt in den <body>.

  • Zeichensatz zu spät deklarieren: <meta charset="UTF-8"> sollte das allererste Element im <head> sein. Wenn der Browser den Zeichensatz nicht früh genug kennt, kann er Umlaute und Sonderzeichen falsch darstellen. Besonders bei deutschen Texten mit ä, ö, ü und ß ist das wichtig.

Browser-Kompatibilität

Das head-Element wird von allen Browsern seit den Anfängen des Webs unterstützt. Es gehört zur Grundstruktur jedes HTML-Dokuments.

ClientUnterstützungHinweise
ChromeKomplett—
FirefoxKomplett—
SafariKomplett—
EdgeKomplett—
OperaKomplett—

Email-Kompatibilität

Das head-Element wird in E-Mail-Clients sehr unterschiedlich behandelt. Viele Clients entfernen den head-Bereich teilweise oder vollständig.

ClientUnterstützungHinweise
Apple MailKomplett—
GmailTeilweiseGmail entfernt den gesamten head-Bereich und ignoriert style-Tags. Nur Inline-Styles werden zuverlässig unterstützt.
OutlookTeilweiseOutlook behält style-Tags im head teilweise bei, entfernt aber viele andere Elemente wie link- und script-Tags.
ThunderbirdKomplett—
Yahoo MailTeilweiseYahoo Mail entfernt den head-Bereich größtenteils. Style-Tags werden teilweise unterstützt, aber Inline-Styles sind zuverlässiger.

Verwandte Elemente

<html> <title> <meta> <link> <style> <script>

Bleib auf dem Laufenden

Erhalte neue Inhalte direkt in dein Postfach

Mit der Anmeldung akzeptierst du unsere Datenschutzerklärung. Du kannst dich jederzeit über den Link in den E-Mails wieder abmelden.

Was erwartet dich?

Neue Artikel & Videos

Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.

Plattform & Kurs-Updates

Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.

Einmal die Woche in deinem Postfach

Kurz, auf den Punkt, kein Spam.