<head>

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.

Steckbrief <head>

Kategorie: Grundstruktur
Art: Metadaten
Beispiele: 2
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 03.02.2026

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

index.html

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>

Beispiele

2 Beispiele

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:

index.html

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>

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

index.html

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>

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

3 Punkte

<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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

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

Apple Mail

Komplett
Gmail

Teilweise

Gmail entfernt den gesamten head-Bereich und ignoriert style-Tags. Nur Inline-Styles werden zuverlässig unterstützt.
Outlook

Teilweise

Outlook behält style-Tags im head teilweise bei, entfernt aber viele andere Elemente wie link- und script-Tags.
Thunderbird

Komplett
Yahoo Mail

Teilweise

Yahoo Mail entfernt den head-Bereich größtenteils. Style-Tags werden teilweise unterstützt, aber Inline-Styles sind zuverlässiger.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<head>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter