Elemente und Eltern/Kind Beziehung

HTML-Elemente lassen sich verschachteln. Um zu verstehen was damit gemeint ist, lernst Du im Folgenden, wie HTML-Elemente in Beziehung zueinander stehen.

Erinnere dich an die vorletzte Lektion. Dort haben wir diesen Text genutzt:

"Ich lerne programmieren auf lerneProgrammieren.de"

Doch woher weiß HTML, dass es sich hier um einen Textabsatz handelt? Die Lösung dafür ist das <p>-Element. Das P-Element steht für Paragraph und definiert den Textabsatz.

Hier ein Beispiel:

<p>Ich lerne programmieren auf lerneProgrammieren.de</p>

Doch was passiert, wenn wir zusätzlich einen Teil des Textes (z.B. "lerneProgrammieren.de") fett markieren wollen?

Ganz einfach. HTML-Elemente stehen in Beziehung zueinander und zwar in der sog. Eltern-Kind Beziehung. Du kannst also Elemente in Elementen benutzen.

Das folgende Beispiel wird dir den nötigen "AHA-Moment" bringen:

<p>Ich <b>lerne programmieren</b> auf lerneProgrammieren.de</p>

Erklärung:

1. In unserem Beispiel hat das <p>-Element ein <b>-Element als Kind.
2. Und umgekehrt, hat das <b>-Element ein Elternelement bekommen.

Diese Eltern-Kind Beziehung von HTML-Elemente ist ein essentielle Grundlage.

Egal welches HTML-Element du verwendest gilt: Elemente können in anderen Elementen verwendet werden.

Hier siehst Du ein Beispiel mit fiktiven HTML-Elementen zum verdeutlichen der Verschachtelung:

<großeltern>

<eltern>

<kind1></kind1>

<kind2></kind2>

<kind3></kind3>

</eltern>

</großeltern>

Ganz einfach, oder?

Doch Vorsicht: Nicht alle Elemente können als "Kinder" benutzt werden. Es gibt ein paar Regeln. Du lernst später, welche das sind.