Der Baum hinter der Seite

Ein HTML-Quelltext sieht aus wie eine Liste von Zeilen. Der Browser macht daraus etwas anderes: einen Baum.

Vom Text zum Baum

<body>
  <header>
    <h1>Waffelblog</h1>
  </header>
  <main>
    <article>
      <h2>Klassische Waffeln</h2>
      <p>Mehl, Eier und <strong>Milch</strong>.</p>
    </article>
  </main>
</body>

Derselbe Quelltext als Baum:

graph TD
    BODY[body] --> HEADER[header]
    BODY --> MAIN[main]
    HEADER --> H1["h1: Waffelblog"]
    MAIN --> ART[article]
    ART --> H2["h2: Klassische Waffeln"]
    ART --> P["p: Mehl, Eier und"]
    P --> STRONG["strong: Milch"]

Die Baumdarstellung einer Seite heißt DOM (Document Object Model). Für die Verwandtschaft gibt es feste Begriffe:

header und main sind Kinder von body.
body ist ihr Elternelement.
header und main sind Geschwister.
h1, h2, p und strong sind alle Nachfahren von body.

Die Einrückung im Quelltext bildet genau diese Tiefe ab: Jede Ebene im Baum ist eine Einrückung mehr.

Der Baum ist keine Theorie – du siehst ihn direkt. Öffne die Entwicklerwerkzeuge (F12) und wechsle in den Reiter Elemente. Genau das ist der Baum, mit Dreiecken zum Auf- und Zuklappen.

Wenn du dort auf ein Element klickst, wird es in der Seite hervorgehoben. Umgekehrt findest du über das Auswahlwerkzeug (das Symbol mit dem Mauszeiger im Rechteck) zu jeder Stelle der Seite das zugehörige Element.

Den Baum lesen

<main> <section> <h2>Über uns</h2> <p>Wir sind die <strong>Garten-AG</strong> der Schule.</p> <ul> <li>Wir treffen uns <em>dienstags</em>.</li> <li>Alle dürfen mitmachen.</li> </ul> </section> </main>

* { outline: 1px solid hsl(210 50% 70%); }

a) Zeichne den Baum zu diesem Quelltext auf Papier.

b) Wie viele Kinder hat <section>?

c) Wer ist das Elternelement von <em>?

d) Ist <strong> ein Nachfahre von <main>? Ist es ein Kind von <main>?

e) Die CSS-Regel im Übungsbereich zeichnet um jedes Element einen Rahmen. Zähle die Rahmen und vergleiche mit deinem Baum.

Tipp zu a): Wie fange ich an zu zeichnen?

Geh den Quelltext von oben nach unten durch und führ dabei einen Stift mit:

Das äußerste Element kommt ganz nach oben aufs Blatt.
Bei jedem Starttag hängst du ein neues Kästchen unter das Element, das gerade offen ist.
Bei jedem Endtag gehst du eine Ebene zurück nach oben.

Die Einrückung im Quelltext hilft dir dabei – sie zeigt bereits, wie tief du gerade bist.

Lösung. Erfrage das Passwort bei deiner Lehrkraft.

Warum der Baum wichtig ist

Drei Dinge folgen aus der Baumstruktur, die du sonst nur auswendig lernen müsstest:

Elemente müssen sich sauber schachteln. <p><strong>Text</p></strong> ergibt keinen Baum – die beiden Elemente überlappen sich. Ein Baum kennt nur „ganz drin" oder „ganz draußen".
CSS vererbt sich nach unten. Setzt du am body eine Schriftart, gilt sie für alle Nachfahren. Der Baum ist der Weg, den die Vererbung nimmt.
Ein Klick trifft mehrere Elemente. Klickst du auf das Wort Milch, hast du zugleich in strong, in p, in article, in main und in body geklickt. Jedes umschließende Element ist mitgemeint.

Prüfe Punkt 2 aus dem Kasten selbst nach.

a) Sag voraus: Welche der drei Texte werden grün, wenn du die Regel section { color: green; } anwendest?

b) Probiere es aus.

c) Ergänze h2 { color: black; } und erkläre das Ergebnis.

<h1>Nicht in der section</h1> <section> <h2>In der section</h2> <p>Auch in der section, mit <em>Betonung</em>.</p> </section>

section { color: green; }

Lösung. Erfrage das Passwort bei deiner Lehrkraft.

Selbsttest

1. Wie heißt die Baumdarstellung einer Webseite?

{r1{HTML}}

{r1{!DOM}}

{r1{CSS}}

{r1{URL}}

{h{Die Abkürzung steht für Document Object Model.}} {H{Richtig – und du siehst ihn im Reiter Elemente.}}

2. Was ist der Unterschied zwischen Kind und Nachfahre?

{r2{Es gibt keinen.}}

{r2{!Ein Kind steht direkt darunter, ein Nachfahre irgendwo darunter.}}

{r2{Ein Nachfahre steht direkt darunter, ein Kind irgendwo darunter.}}

{r2{Kinder sind Textelemente, Nachfahren sind Tags.}}

{h{Zwischen main und strong lagen noch zwei Elemente.}} {H{Richtig. Jedes Kind ist ein Nachfahre, aber nicht umgekehrt.}}

3. Warum ist p strong Text /p /strong falsch?

{r3{Weil strong nicht in p stehen darf.}}

{r3{!Weil sich die beiden Elemente überlappen und das keinen Baum ergibt.}}

{r3{Weil die Reihenfolge der Endtags egal ist.}}

{r3{Es ist gar nicht falsch.}}

{h{Ein Baum kennt nur ganz drin oder ganz draußen.}} {H{Richtig.}}

4. Du setzt am body eine Schriftart. Für welche Elemente gilt sie?

{r4{nur für das body-Element selbst}}

{r4{!für alle Nachfahren, solange keine eigene Regel sie ersetzt}}

{r4{für alle Elemente der Seite, ohne Ausnahme}}

{r4{für gar keines}}

{h{Die Vererbung nimmt den Weg des Baums nach unten.}} {H{Richtig.}}

5. In welchem Reiter der Entwicklerwerkzeuge siehst du den Baum?

{r5{Netzwerk}}

{r5{!Elemente}}

{r5{Konsole}}

{r5{Speicher}}

{h{Dort lassen sich die Ebenen auf- und zuklappen.}} {H{Richtig.}}

6. Ein section-Element enthält h2, p und ul. Das p enthält ein strong. Wie viele Kinder hat die section?

{z{3}}

{h{Kind heißt: direkt darunter.}} {H{Richtig – das strong ist ein Kind des p, nicht der section.}}