Was ist der Dokumentbaum?
Eine HTML-Seite ist nicht einfach eine Abfolge von Tags — sie hat eine hierarchische Struktur. Diese Struktur lässt sich als Baum darstellen, den man DOM (Document Object Model) nennt.
Der Baum hat einen Wurzelknoten (<html>), der alle anderen Elemente enthält. Elemente, die direkt in einem anderen Element stecken, heißen Kindelemente. Das äußere Element ist ihr Elternelement.
Schachtelung von Elementen
HTML-Elemente werden ineinander verschachtelt. Dabei gilt: Ein geöffnetes Tag muss immer innerhalb seines Elternelements wieder geschlossen werden.
<!DOCTYPE html>
<html>
<head>
<title>Meine Seite</title>
</head>
<body>
<h1>Überschrift</h1>
<p>Ein <strong>Absatz</strong> mit Text.</p>
</body>
</html>Als Baumdiagramm
Das obige Beispiel lässt sich so als Baum darstellen:
html
├── head
│ └── title → „Meine Seite"
└── body
├── h1 → „Überschrift"
└── p
└── strong → „Absatz"
├── head
│ └── title → „Meine Seite"
└── body
├── h1 → „Überschrift"
└── p
└── strong → „Absatz"
Merke: Der Baum zeigt, welche Elemente Eltern, Kinder oder Geschwister voneinander sind. CSS-Selektoren und JavaScript nutzen genau diese Baumstruktur, um Elemente gezielt anzusprechen.
Regeln für korrekte Schachtelung
- Tags müssen in umgekehrter Reihenfolge geschlossen werden: das zuletzt geöffnete Tag wird zuerst geschlossen.
- Richtig:
<p><strong>Text</strong></p> - Falsch:
<p><strong>Text</p></strong> - Block-Elemente (z.B.
<div>,<p>) dürfen keine Block-Elemente innerhalb von Inline-Elementen enthalten.