Tags, Elemente und Verschachtelung

Zwei Begriffe, die ständig durcheinandergehen, und eine Regel, die dir später viel Fehlersuche erspart. Beides gehört zusammen, deshalb steht es in einer Lektion.

01 / 04Tag oder Element

Ein Tag ist die Markierung in spitzen Klammern, zum Beispiel <p>. Ein Element ist das Gesamtpaket aus öffnendem Tag, Inhalt und schließendem Tag: <p>Text</p>.

Im Alltag sagt man oft „das p-Element“ und meint das Ganze, oder „setz da ein p-Tag hin“ und meint eigentlich das Element. Das ist in Ordnung, solange dir der Unterschied klar ist. Wichtig wird er, sobald du über den Aufbau der Seite sprichst: Ein Element kann andere Elemente enthalten, ein Tag kann das nicht. Ein Tag ist nur die Markierung an der Grenze.

02 / 04Elemente stecken ineinander

Elemente können andere Elemente enthalten. Das nennt man Verschachtelung, und es ist die Art, wie in HTML überhaupt Struktur entsteht.

<div>
  <h2>Überschrift</h2>
  <p>Ein Absatz mit <strong>fettem</strong> Text.</p>
</div>

Ein div umschließt hier eine Überschrift und einen Absatz, und im Absatz steckt noch ein strong um ein einzelnes Wort.

Das div ist dabei ein reiner Container ohne eigene Bedeutung. Es sagt nur „diese Dinge gehören zusammen“. Später lernst du Elemente kennen, die dasselbe tun und dabei auch noch verraten, was da zusammengehört. Für den Moment ist div genau richtig, um Verschachtelung zu üben.

Das Gerüst aus der letzten Lektion war übrigens schon Verschachtelung: head und body stecken in html, deine Inhalte stecken im body. Das Prinzip ist überall dasselbe, nur die Elemente wechseln.

03 / 04Wie Klammern, die sich nicht kreuzen dürfen

Dabei gilt eine feste Regel: Was zuletzt geöffnet wurde, wird zuerst geschlossen. <strong><em>Text</em></strong> ist richtig. <strong><em>Text</strong></em> ist falsch, weil sich die beiden überkreuzen.

Genau dieser Fall:

<p>Ein <strong>wichtiges <em>und betontes</strong> Wort</em> im Satz.</p>

Der Browser gibt nicht auf, sondern repariert nach festen Regeln, was du geschrieben hast. Optisch geht das hier sogar gut: Auf der Seite sieht der Satz genau so aus, wie du es gemeint hast. Im Baum steht trotzdem etwas anderes. Aus dem einen em sind zwei geworden, eines im strong und eines dahinter.

Nachsehen kannst du das jetzt noch nicht, dafür fehlt dir das Werkzeug. In Abschnitt 11 fragst du den Browser genau danach, an genau diesem Beispiel, und dann steht die Antwort schwarz auf weiß da. Für den Moment gibt es einen Umweg, gleich hier unten.

Das ist der unangenehme Teil an HTMLs Fehlertoleranz: Es kracht nicht, und man sieht es nicht einmal. Es steht nur still etwas anderes da, als du geschrieben hast. Eine CSS-Regel oder ein Stück JavaScript, das später „das em“ meint, erwischt dann nur die Hälfte. Bei drei Zeilen findet man das noch, bei dreihundert nicht mehr. Deshalb lohnt es sich, die Klammer-Regel von Anfang an ernst zu nehmen.

Setz die beiden schließenden Tags im Beispiel testweise in die richtige Reihenfolge. Jetzt ist „ Wort“ fett statt kursiv, und genau daran siehst du, dass vorher etwas anderes im Baum stand, als der Code nahegelegt hat.

04 / 04Eltern, Kinder und Geschwister

Aus der Verschachtelung entsteht ein Baum, und für den gibt es Vokabeln, die du überall wiederfindest.

<div>
  <h2>Linsensuppe</h2>
  <p>Ein Topf, eine halbe Stunde.</p>
  <ul>
    <li>Linsen</li>
    <li>Suppengrün</li>
    <li>Ein Schuss <em>Essig</em></li>
  </ul>
</div>

Für diesen Block gilt:

• Das div ist das Elternelement von h2, p und ul.
• h2, p und ul sind Kinder des div und untereinander Geschwister.
• Die drei li sind Kinder des ul und Enkel des div.
• Das em steckt im dritten li und ist damit ein Nachfahre von allem darüber.

Diese Begriffe wirken jetzt vielleicht wie Fleißarbeit. Sie zahlen sich aber schnell aus: CSS wählt Elemente über genau diese Beziehungen aus, JavaScript navigiert darüber durch die Seite, und auch die Prüfungen in diesem Kurs benutzen sie. Wenn in einer Aufgabe steht „ein li innerhalb eines ul“, dann meint das genau diese Eltern-Kind-Beziehung.

Ein letzter Tipp: Rück verschachtelte Elemente ein, eine Ebene pro Stufe. Der Browser braucht das nicht, du schon. In der Challenge baust du deinen ersten eigenen Container mit zwei Kindern darin.