Eltern- und Kindelemente in HTML

Der HTML-Code einer Website hat eine klare, hierarchische Struktur. Zu einem Grundgerüst gehört die Dokumenttyp-Deklaration, das HTML-Element und innerhalb davon ein HEAD- und BODY-Bereich, die über bestimmte Befehle mit sonstigen Elementen gefüllt werden können. Mit der Dokumenttyp-Deklaration wird lediglich angegeben, um was für ein Dokument es sich handelt. Das HTML-Element ist das Wurzelelement für alle enthaltenen Elemente, die auf der Website vorkommen. Da sich die Bereiche HEAD und BODY innerhalb des Wurzelelements befinden, sind sie Kindelemente davon. Das Wurzelelement ist wiederum ein Elternelement von HEAD und BODY.

Das Verständnis zwischen Eltern- und Kindelementen in HTML ist vor allem für die Positionierung und Formatierung mit CSS wichtig. Denn, die Position eines Kindelements ist vor allem von der Position des Elternelements abhängig. Es gibt zwar Möglichkeiten, diese zu entkoppeln. Allerdings kommt das in der Praxis selten vor, da das Aussehen von Websites in der Regel durch die Aneinanderreihung und Verschachtelung von Elementen bestimmt wird. Im Zusammenhang mit CSS ist wichtig, dass Elternelemente ihre Eigenschaften (größtenteils) an die Kindelemente vererben. Das sorgt für eine erhebliche Vereinfachung und man muss den Elementen keine Eigenschaften vorgeben, die sie von den Elternelementen erben.

Nachfolgend ist ein vereinfachter Beispielcode in HTML mit verschiedenen Eltern- und Kindelementen.

<!DOCTYPE html>

<html>

<head>
  <title>Website</title>
</head>

<body>

  <div>
    <h1>Überschrift</h1>
    <p>Absatz mit <strong>wichtigem Text</strong>.</p>
    <p>Absatz mit einem <a href="link.html">Link</a>.</p>
  </div>

</body>

<html>

Aus dem HTML-Code kann man herauslesen, dass der TITLE-Tag sich innerhalb des HEAD-Bereichs befindet. Der BODY-Bereich enthält einen DIV-Container und der enthält wiederum eine Überschrift und zwei Absätze. Innerhalb der Absätze hat man einen STRONG-Tag (wichtiger Text) und einen A-Tag für einen Hyperlink. Dementsprechend hat die Website die folgende Struktur.

Die Dokumentenstruktur dient auch als Basis für das Document Object Model (DOM), worüber auf die Elemente einer Website zugegriffen werden kann. Die Überschrift und die beiden Absätze sind innerhalb des DIV-Containers. Würde man den DIV-Container anders positionieren, z.B. mit einem Abstand zur linken Kante, hätte das automatisch Auswirkungen auf die Kindelemente. Bei der Vererbung gibt es jedoch auch Ausnahmen. Ein Beispiel sind die Überschriften (H1- bis H6-Tags) und die Hyperlinks (A-Tag). Wenn man bei dem Beispielcode dem DIV-Container eine Schriftgröße zuweisen würde, hätte die Formatierung bei den Überschriften keine Auswirkung und sie würden von der Regel ausgenommen werden. Dasselbe betrifft die Schriftfarbe bei den Hyperlinks. Denn, diese werden in einer Standardfarbe des Browsers (meistens Blau) angezeigt, selbst wenn dem Elternelement eine andere Schriftfarbe zugewiesen wurde. Wenn man die Schriftgröße der Überschriften oder die Schriftfarbe der Hyperlinks beeinflussen möchte, kann man das mit separaten CSS-Regeln erreichen.