HTML-Dokumentstruktur

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

<!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>

Gehen wir jede Zeile durch.

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

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

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)

Der <body>-Bereich enthält alles, was der Nutzer auf der Seite sieht: Texte, Bilder, Links, Formulare, Videos, also den gesamten sichtbaren 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>

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

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

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.

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