HTML-Dokumentstruktur

Zuletzt aktualisiert am 3. Februar 2026

Jede HTML-Seite folgt dem gleichen Grundgerüst. Egal ob du eine simple “Hallo Welt”-Seite baust oder eine komplexe Webanwendung: die Struktur bleibt immer dieselbe. Auf dieser Seite lernst du, welche Teile ein HTML-Dokument hat und warum jeder davon wichtig ist.

Das Grundgerüst

Hier ist die Minimalstruktur, die jede HTML-Seite braucht:

HTML-Grundgerüst

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seitentitel</title>
  </head>
  <body>
    <h1>Inhalt kommt hier hin</h1>
  </body>
</html>

Vorschau

Gehen wir jede Zeile durch.

`<!DOCTYPE html>`

Die erste Zeile ist die Document Type Declaration. Sie teilt dem Browser mit: “Dieses Dokument ist HTML5.” Ohne diese Zeile kann der Browser in den sogenannten Quirks Mode fallen: einen Kompatibilitätsmodus, in dem ältere Rendering-Regeln gelten. Das kann zu unerwartetem Verhalten bei der Darstellung führen.

<!DOCTYPE html>

Es ist kein HTML-Tag, sondern eine Anweisung an den Browser
Immer die erste Zeile des Dokuments
Groß-/Kleinschreibung spielt keine Rolle, aber <!DOCTYPE html> ist die übliche Schreibweise

`<html>`: Das Wurzelelement

Das <html>-Element umschließt das gesamte Dokument. Es ist das Wurzelelement (Root Element): alle anderen Elemente leben darin.

<html lang="de">
  ...
</html>

Das lang-Attribut gibt die Sprache des Dokuments an. Für deutschsprachige Seiten verwendest du "de", für englische "en". Das ist wichtig für:

Screenreader, die den Text in der richtigen Sprache vorlesen
Suchmaschinen, die die Sprache der Seite erkennen
Übersetzungstools, die wissen, aus welcher Sprache übersetzt werden soll

`<head>`: Der unsichtbare Kopf

Der <head>-Bereich enthält Metadaten: Informationen über die Seite, die nicht direkt auf der Seite sichtbar sind. Hier definierst du den Titel, die Zeichenkodierung, Stylesheets und vieles mehr.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Seitentitel</title>
</head>

Die wichtigsten Head-Elemente

<meta charset="UTF-8">: Legt die Zeichenkodierung fest. UTF-8 unterstützt praktisch alle Zeichen der Welt (Umlaute, Emojis, chinesische Schriftzeichen). Ohne diese Angabe können Umlaute wie ä, ö, ü als Zeichensalat erscheinen.

<meta name="viewport">: Sorgt dafür, dass die Seite auf Mobilgeräten korrekt skaliert wird. Ohne dieses Tag zeigen Smartphones die Seite in der Desktop-Breite an und der Nutzer muss zoomen.

<title>: Der Seitentitel, der im Browser-Tab und in Suchergebnissen angezeigt wird. Jede Seite sollte einen eindeutigen, beschreibenden Titel haben.

Weitere übliche Head-Elemente

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Beschreibung für Suchmaschinen" />
  <title>Seitentitel</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="icon" href="favicon.ico" />
</head>

<meta name="description">: Eine kurze Beschreibung der Seite für Suchmaschinen
<link rel="stylesheet">: Bindet eine CSS-Datei ein
<link rel="icon">: Das kleine Icon im Browser-Tab (Favicon)

`<body>`: Der sichtbare Inhalt

Der <body>-Bereich enthält alles, was der Nutzer auf der Seite sieht: Texte, Bilder, Links, Formulare, Videos, also den gesamten sichtbaren Inhalt.

Typischer Body-Inhalt

<body>
  <h1>Willkommen</h1>
  <p>Dies ist ein Absatz mit <a href="https://mitmario.dev">einem Link</a>.</p>
  <img src="https://via.placeholder.com/200x100" alt="Platzhalter-Bild">
</body>

Vorschau

Pro Dokument gibt es genau einen <body>-Bereich. Alles, was sichtbar sein soll, gehört hier rein.

Die Baumstruktur

HTML-Dokumente haben eine Baumstruktur. Jedes Element kann andere Elemente enthalten (Kinder) und ist selbst in einem anderen Element enthalten (Elternelement). Diese Hierarchie sieht so aus:

html
├── head
│   ├── meta
│   ├── meta
│   └── title
└── body
    ├── h1
    └── p
        └── a

Diese Struktur ist wichtig, weil:

CSS-Regeln sich über die Hierarchie vererben (z.B. Schriftfarbe vom body auf alle Kinder)
JavaScript über diese Struktur (den DOM) auf Elemente zugreift
Fehlerhafte Verschachtelung zu unerwartetem Verhalten führen kann

Einrückung und Formatierung

HTML ist bei Leerzeichen und Zeilenumbrüchen recht tolerant, der Browser ignoriert sie weitgehend. Trotzdem solltest du deinen Code sauber einrücken, damit er lesbar bleibt:

<!-- Schwer lesbar -->
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <h1>Hallo</h1>
  </body>
</html>

<!-- Gut lesbar -->
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <h1>Hallo</h1>
  </body>
</html>

Die Konvention: Jede Verschachtelungsebene wird um 2 Leerzeichen eingerückt (manche Teams verwenden auch 4 oder einen Tab). Wichtig ist, dass du konsistent bleibst.

Häufige Fehler

DOCTYPE vergessen: Ohne <!DOCTYPE html> kann der Browser die Seite im Quirks Mode rendern, was besonders bei CSS zu Problemen führt.
charset nicht angegeben: Umlaute und Sonderzeichen werden falsch dargestellt. Setze <meta charset="UTF-8"> immer als erstes Element im <head>.
lang-Attribut fehlt: Screenreader wissen nicht, in welcher Sprache sie vorlesen sollen. Das beeinträchtigt die Barrierefreiheit.
Viewport-Meta vergessen: Die Seite wird auf Mobilgeräten viel zu klein dargestellt. Nutzer müssen zoomen.

Zusammenfassung

Teil	Zweck
`<!DOCTYPE html>`	Deklariert das Dokument als HTML5
`<html>`	Wurzelelement, enthält alles
`<head>`	Metadaten (Titel, Charset, CSS-Links)
`<body>`	Sichtbarer Seiteninhalt

Im nächsten Artikel schauen wir uns an, wie Tags und Elemente genau funktionieren, also die Bausteine, aus denen jede HTML-Seite besteht.

Erhalte neue Inhalte direkt in dein Postfach

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.