Lädt...

HTML-Head

Die vorherige Sitzung konzentrierte sich auf ein Kind des Dokument-Heads: title. Zoome jetzt auf das head-Element selbst — die Box, die Metadaten über die Seite für Browser, Suchwerkzeuge und verknüpfte Ressourcen hält. Besucher lesen head nicht wie eine Geschichte in der Hauptansicht. Sie spüren die Wirkung über den Tab-Titel, korrekte Zeichen, mobiles Skalieren und Stylesheets, die laden, bevor der Body-Inhalt gezeichnet wird.

Wofür head da ist

<head>...</head> sitzt in <html>, meist direkt nach dem öffnenden html-Tag und vor <body>. Es ist der Kontrollraum des Dokuments für Metadaten und Ressourcenlinks. Es ist kein sichtbares Banner. Das sichtbare Seitenbanner, das du später mit einem <header>-Element baust, ist ein anderes Tag mit einer anderen Aufgabe.

Direkte Antwort

Lege Metadaten in <head>...</head> ab: ein title, meist <meta charset="UTF-8">, oft ein Viewport-meta für mobiles Layout und <link rel="stylesheet" href="...">, wenn du externes CSS nutzt. Sichtbare Überschriften, Absätze, Bilder und interaktive UI gehören in <body>. title ist ein wichtiges Kind von head — es ersetzt head nicht.

Häufige Kinder auf einen Blick

📊 Häufige head-Kinder

Element Rolle
title Tab- / Dokumentbezeichnung
meta charset Zeichenkodierung (UTF-8)
meta viewport Hinweis zu Mobilbreite und Skalierung
link stylesheet Externe CSS-Datei
style Optionales internes CSS
script Optionale Skripte (Platzierungsgewohnheiten variieren; viele Anfänger laden am Ende von body)

Ein praktischer Starter-head

Du brauchst nicht jedes mögliche Meta-Tag am ersten Tag. Ein zuverlässiger Anfänger-head deckt Encoding, mobiles Viewport, Dokumenttitel und einen Stylesheet-Link ab, wenn CSS in einer eigenen Datei liegt.

Ein praktischer Starter-head

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

Das Beispiel lesen

  • meta charset="UTF-8" sagt dem Browser, wie Zeichen dekodiert werden — inklusive Emoji und nicht-lateinischem Text aus früheren Sitzungen
  • viewport hilft mobilen Browsern, die Gerätebreite zu nutzen statt eines winzigen, herausgezoomten Desktop-Layouts
  • title beschriftet den Tab, wie in der Sitzung zum Seitentitel geübt
  • link rel="stylesheet" hängt styles.css an, ohne CSS-Regeln in jede HTML-Datei zu schreiben
  • Alles, was der Besucher auf der Seite liest, liegt unter body

Charset zuerst, früh im head

Platziere das Charset-meta nahe oben im head, damit der Browser die Kodierung kennt, bevor er den restlichen Dokumenttext interpretiert. UTF-8 ist der moderne Standard, den du nutzen solltest, sofern keine seltene Legacy-Vorgabe etwas anderes verlangt. Fehlendes oder spätes Charset ist ein Klassiker für kaputte Zeichen, die wie „zufällige“ Korruption aussehen.

Viewport und mobile Browser

Ohne Viewport-Meta nehmen viele Telefone eine breite Desktop-Fläche an und schrumpfen die Seite. Der übliche Starter width=device-width, initial-scale=1.0 sagt dem Browser, die Gerätebreite zu treffen und mit normalem Zoom zu starten. Responsives Design verfeinerst du später mit CSS; Viewport ist der HTML-seitige Handschlag, der diese Layouts auf Handys nutzbar macht.

CSS aus dem head verknüpfen

Externe Stylesheets trennen Darstellung von Struktur. Das link-Element im head mit rel="stylesheet" und einem href-Pfad ist der anfängerfreundliche Weg, CSS anzubinden. Pfade folgen denselben Dateipfad-Ideen wie zuvor. Fehlt die CSS-Datei, funktioniert HTML trotzdem — es sieht nur ungestylt aus.

head vs. body vs. header

  • head — Metadaten und Ressourcenlinks; nicht der hauptlesbare Artikel
  • body — sichtbarer Inhalt, den Besucher lesen und bedienen
  • header — ein sichtbares Sectioning-Element für Banner oder Einleitungsblöcke in body (später in Layout-Sitzungen)
    Benenne head nicht in header um in der Hoffnung, sie seien Aliase. Es sind verschiedene Elemente. Verwechslung führt zu ungültigem oder wirkungslosem Markup.

Skripte und head (Anfängerhinweis)

Skripte können in head oder body stehen. Viele Lehrseiten laden einfache Skripte am Ende von body, damit die HTML-Struktur zuerst existiert. Fortgeschrittene Ladestrategien kommen später. Für diese Sitzung: script ist als head-Kind erlaubt, aber sichtbarer Inhalt gehört trotzdem nicht in head.

Übung im Editor

  1. Starte von einem einfachen HTML-Gerüst mit html, head und body.
  2. Füge in head Charset UTF-8, ein Viewport-Meta und einen klaren title hinzu.
  3. Füge einen link zu einer einfachen styles.css hinzu, falls vorhanden (oder lege eine leere Datei an, damit der Pfad echt ist).
  4. Halte allen sichtbaren Text und alle Überschriften nur in body.
  5. Nutze Quelltext anzeigen oder DevTools Elements, um zu bestätigen, dass der head-Bereich deiner Absicht entspricht.
  6. Entferne Viewport vorübergehend, lade in einem schmalen Fenster oder Phone-Emulator neu, falls möglich, und beachte das andere Skaliergefühl — dann stelle ihn wieder her.

Leichte Fehler

  • Absätze, Bilder oder Hauptüberschriften nur in head legen, als wäre es die Seitenfläche
  • Charset vergessen, sodass Sonderzeichen und Emoji kaputtgehen
  • Viewport weglassen und sich über seltsam gezoomtes Mobil-Layout wundern
  • head (Metadaten) mit header (sichtbarer Abschnitt später im Kurs) verwechseln
  • Annehmen, title allein reiche, und Charset auf mehrsprachigen Seiten weglassen
  • Ein Stylesheet mit falschem Pfad verknüpfen und HTML beschuldigen, wenn CSS nie lädt

Zusammenfassung

  • head hält Metadaten und Ressourcenlinks; body hält sichtbaren Inhalt
  • Starter-Bausteine: Charset, Viewport, Title und oft ein CSS-link
  • title ist ein Kind von head, kein Ersatz für head
  • head ist nicht dasselbe Element wie das sichtbare header
  • Setze Charset früh, damit der Browser das Dokument korrekt dekodiert

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
6
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 1 von 1
Html Tutorial