Dokumentstruktur von HTML-Dateien, Strukturbaum und Strukturpfad
In einer HTML-Datei kommen viele verschiedene Objekte vor. Das sind für uns vor allem Texte und HTML-Tags. Es können aber auch CSS-Regeln und Programmstücke in Programmiersprachen wie JavaScript vorkommen. Wie die einzelnen Objekte angeordnet werden dürfen, regelt das Document Object Model (DOM); ein Standard des W3C WWW-Consortiums (wie auch HTML und CSS).
Die Details des DOM interessieren uns nicht, aber wir nutzen es insofern, da es den "Zugriff" auf das Dokument und seine Objekte regelt. Wir brauchen es für die Zuordnung der CSS-Regeln auf einzelne HTML-Elemente. Anders formuliert: welche Regel wirkt wo in der HTML-Datei.
Um eine Website mit CSS effizient und ohne Probleme zu formatieren, müssen wir die Regeln gezielt auf die Struktur der HTML-Dateien anwenden können. Dafür braucht man ein genaues Bild von der Struktur der HTML-Dateien. Um die Struktur zu verdeutlichen, ist am besten die Darstellung als "Baum" geeignet.
Anmerkung: Baum ist ein Begriff aus der Graphentheorie, einem Teilgebiet der Mathematik. In der Computertechnik werden verschiedene Arten von Bäumen benutzt, um Datenstrukturen darzustellen.
Wie wir Baum ... weiter unten ... Zeichnen freihand auf Papier, Organigramm, Word Liste, DOM-Inspector, Querverweis Windows Explorer.
Dokumentstruktur
Wie man die Dokumentstruktur von HTML-Dateien erkennt, schauen wir uns anhand eines Beispiels an. Dazu betrachten wir eine kleine Webseite:
Die Verkehrsampel
Eine Verkehrsampel dient der Steuerung des Straßenverkehrs.
Aufbau einer Ampel
Die Verkehrsampel besteht aus drei Leuchten in den Farben Rot, Gelb und Grün. Dabei befindet sich Rot immer oben (bzw. links), Gelb ist in der Mitte und Grün unten (bzw. rechts).
Signalfolge und ihre Bedeutung
- Rot: Keine Einfahrt, stehen bleiben.
- Rot-Gelb: Achtung, Ampel wechselt gleich auf Grün.
- Grün: Der Verkehr ist frei gegeben.
- Grün blinkend: Achtung, Ampel wechselt gleich auf Gelb.
- Gelb: Achtung, Ampel wechselt gleich auf Rot. Nicht in die Kreuzung einfahren, Kreuzung verlassen.
Das Blinken von Grün ist eine österreichische Besonderheit und weltweit nur in wenigen Staaten üblich.
Der dazugehörige Quellcode sieht dann so aus:
(Anmerkung: Da an dieser Stelle nur der <body>-Bereich interessant ist,
wird nur dieser dargestellt, um so das Beispiel übersichtlicher zu gestalten.)
<body>
<h1>Die Verkehrsampel</h1>
<p>Eine Verkehrsampel dient der <strong>Steuerung des Straßenverkehrs</strong>.</p>
<h3>Aufbau einer Ampel</h3>
<p>Die Verkehrsampel besteht aus drei Leuchten in den Farben <strong>Rot</strong>, <strong>
Gelb</strong> und <strong>Grün</strong>. Dabei befindet sich Rot immer oben (bzw.
links), Gelb ist in der Mitte und Grün unten (bzw. rechts).</p>
<h3>Signalfolge und ihre Bedeutung </h3>
<ul>
<li>Rot: Keine Einfahrt, stehen bleiben.</li>
<li>Rot-Gelb: Achtung, Ampel wechselt gleich auf Grün.</li>
<li>Grün: Der Verkehr ist frei gegeben.</li>
<li>Grün blinkend: Achtung, Ampel wechselt gleich auf Gelb.</li>
<li>Gelb: Achtung, Ampel wechselt gleich auf Rot. Nicht in die Kreuzung einfahren,
Kreuzung verlassen.</li>
</ul>
<p>Das <em>Blinken von Grün ist eine <strong>österreichische</strong> Besonderheit
</em> und weltweit nur in wenigen Staaten üblich.</p>
</body>
Jedes HTML-Element im Quellcode, z.B. "Überschrift 1", beginnt mit dem Anfangstag <h1>, umfasst dann den Gültigkeitsbereich und endet mit dem Endtag </h1>.
Sehen wir uns dazu die ersten drei Zeilen des Quellcodes näher an:
<body> <h1>Die Verkehrsampel</h1> <p>Eine Verkehrsampel dient der <strong>Steuerung des Straßenverkehrs</strong>.</p> … </body>
Der Inhalt des Elementes h1 ist in diesem Beispiel die Textstelle: "Die Verkehrsampel". Der Inhalt des ersten Absatzes p ist: "Eine Verkehrsampel dient der Steuerung des Straßenverkehrs." Das erste Element ist zu Ende bevor das zweite beginnt: <h1>…</h1><p>…</p>. Beide Elemente stehen hintereinander,
Der Inhalt des Elementes strong ist in diesem Beispiel die Textstelle: "Steuerung des Straßenverkehrs". Wir sehen, dass sich sein Anfangstag nach dem des Absatzes befindet (<p>…<strong>…) und sein Endtag vor dem des Absatzes (…</strong>…</p>). Das Element strong ist vom Element p vollständig umgeben: <p>…<strong>…</strong>…</p>. Dieses Element steht innerhalb des anderen.
"Schachteln" der HTML-Elemente
Zur besseren Vedeutlichung kann man sich die Elemente auch als Schachteln vorstellt, die beim Anfangstag beginnen und beim Endtag aufhören.
Die Schachtel vom Element h1:
Die Schachtel vom Element p:
Die Schachtel von Element strong:
Somit können Schachteln nebeneinander stehen, so wie in unserem Beispiel h1 und p:
Aber sie können auch ineinander verschachtelt sein, wie hier strong innerhalb von p ist:
Anmerkung: HTML-Elemente müssen korrekt verschachtelt sein. Sie dürfen nur nebeneinander oder ineinander stehen. Falsch wäre es, wenn ein HTML-Element, das vor einem weiteren beginnt, auch vor diesem wieder endet.
Ein Beispiel für solch einen Fehler wäre: <em>…<strong>…</em>…</strong>.
Hier beginnt die Schachtel des HTML-Elementes em zuerst. Gleich danach,
noch bevor em beendet ist, beginnt die Schachtel des HTML-Elementes
strong (<em>…<strong>…).
Daher können die Schachteln von em und strong nicht nebeneinander stehen,
denn dazu müsste
sich das Endtag von em vor dem Endtag von strong befinden, was es aber
nicht tut.
Daraus folgt: die Schachtel des HTML-Elementes strong
kann sich nur innerhalb der Schachtel des HTML-Elementes em befinden.
Dazu müsste
sich aber das Endtag von strong vor dem Endtag von em befinden,
was aber nicht tut.
Somit endet die Schachtel des HTML-Elements em vor der des HTML-Elementes
strong. Da sie aber auch als erste beginnt, überkreuzen
sich die Schachteln beider HTML-Elemente, was nicht erlaubt ist.
Wir haben die HTML-Elemente h1, p und strong betrachtet. Die Schachteln der zwei HTML-Elemente h1 und p stehen nebeneinander. Gleichzeitig stehen aber auch beide innerhalb der Schachtel des HTML-Elements body. Somit sehen alle Schachteln der ersten drei Zeilen unseres Beispieles so aus:
Sehen wir uns nun die Struktur der Verschachtelung an. Die äußerste Schachtel ist immer die des HTML-Elementes body. Innerhalb dieser sind die Schachteln der HTML-Elemente h1 und p. Die Schachtel des HTML-Elementes strong jedoch ist nicht direkt innerhalb der von body. Würde man in die Schachtel von body hineinschauen, würde man die Schachtel von strong nicht sehen, da sie in der Schachtel von p "versteckt" ist. Daher ist die Schachtel von strong innerhalb von der Schachtel von p und nicht in der Schachtel von body.
Die Schachteln der ganzen HTML-Datei sieht dann so aus:
"Schachteln" von inhaltsleeren HTML-Elementen
Wir haben zuvor gelernt: Wenn wir uns den Inhalt eines Elementes ansehen, also seinen Gültigkeitsbereich, so befindet sich dieser zwischen dem Anfangstag <h1> und dem Endtag </h1>. Nun gibt es aber auch "inhaltsleere" HTML-Elemente. Diese haben keinen Gültigkeitsbereich, sondern gelten nur an einer einzelnen Stelle. Dazu gehört z.B. die HTML-Elemente img und br. Sie besitzen nur einen (Anfangs)tag, aber keinen Endtag. Daher umfasst die Schachtel nur den einzelnen (Anfangs)tag.
Wenn man nun nicht weiß, welche HTML-Elemente inhaltsleer sind, wird das Erkennen der Struktur schwieriger. Steht im Quellcode ein tag, den man nicht kennt, so weiß man nicht: ist dies jetzt ein Anfangstag und folgt noch ein Endtag (…<xy>…</xy>…) oder ist das HTML-Element inhaltsleer und der tag steht alleine (…<xy>…)?
In XHTML gibt es keine Elemente mehr, die inhaltsleer im Quellcode notiert werden. So werden bei diesen Elementen die tags in XHTML mit einem Endtag geschrieben: <img></img> und <br><br/>. Zwischen dem Anfangstag und Endtag darf nichts stehen. Meist wird jedoch die Kurzform verwendet, bei der das Endtag in den Starttag einfließt. Dazu kommt der Schrägstrich, der das Endtag kennzeichnet, an die letzte Stelle des Anfangstags. Damit ältere Browser, die XHTML nicht kennen, keine Schwierigkeiten bekommen, kommt vor dem Schrägstrich noch ein Leerzeichen. Somit steht dann im Quellcode: <img /> und <br />. Das Endtag entfällt und beim (Anfangs)tag kann man schon am Schrägstrich erkennen, dass es ein inhaltsleeres (X)HTML-Element ist und kein Endtag mehr kommen wird. Also das der Wirkungsbereich schon vorbei ist und die Schachtel auch gleich wieder aufhört.
Strukturbaum
Die Verschachtelung und damit die Hierarchie der einzelnen HTML-Elemente ergibt nun die Struktur der HTML-Datei. Diese Struktur kann nun als Baum dargestellt werden.
Anmerkung: Bäume werden in der Computertechnik oft zur Darstellung verwendet. Hat man sich einmal eingearbeitet, so sind sie ein gutes Werkzeug um Strukturen sichtbar zu machen. Bäume haben in der Computertechnik sehr oft die Wurzel (den Ausgangspunkt) oben und verzweigen sich nach unten.
Da wir als erste, äußerste Schachtel stets die des HTML-Elementes body haben, verwenden wir dieses als Wurzel unseres Strukturbaumes:
Als nächstes tragen wir die HTML-Elemente ein, deren Schachteln direkt innerhalb des vorigen HTML-Elementes sind. Innerhalb von body sind hier h1 und p. Also werden zwei Zweige nach unten gezeichnet, einer für h1 und einer für p:
Nehmen wir nun die Schachteln der HTML-Elemente, sie wir soeben eingetragen haben:
Gibt es innerhalb eines HTML-Elements kein anderes mehr (hier bei h1), so ist die Schachtel leer. Somit ist der Zweig des Baumes zu Ende und wir sind an dieser Stelle fertig.
Gibt es innerhalb eines HTML-Elements weitere (hier bei p), so "wächst" der Zweig weiter. Das HTML-Element strong befindet
sich innerhalb von p. Daher wird vom HTML-Element p aus ein Zweig nach
unten gezeichnet und dort das HTML-Element strong platziert:
Wenn man nach diesem Schema weiterarbeitet, bekommt man den vollständigen Baum der gesamten HTML-Datei.
Die Schachteln der HTML-Datei:
Der dazugehörende Strukturbaum: (in Originalgröße ist er doppelt so groß, aber mit 1340 Pixel zu groß für die meisten Bildschirme)
Bei üblichen HTML-Dateien werden die Bäume sehr groß. Zum Glück braucht man so gut wie nie die Darstellung ganzer HTML-Dateien. Es genügt meist die Darstellung von Teilbereichen.
Strukturpfad
Für das Ansprechen eines HTML-Elements mit CSS (und auch JavaScript) ist es wichtig, an welcher Position der Struktur sich dieses Element befindet. Dazu verwendet man den Strukturpfad, also in welchen Schachteln, hierarchisch geordnet, befindet sich das HTML-Element.
Dazu beginnt man mit der äußersten Schachtel und öffnet der Reihe nach die Schachteln, um zum gewünschten Element zu gelangen.
Wenn man den Strukturbaum betrachtet, geht man vom äußersten Element body beginnend entlang der Zweige über jedes Element bis man zum gewünschten Element kommt.
Für das strong im ersten Absatz ergibt dies den Strukturpfad: <body> <p> <strong>
Anzeige des Strukturpfads im Webeditor
Die meisten Webeditoren zeigen diesen Strukturpfad grafisch an:
- Expression Web
- Leiste "Direktauswahl von Tags" unterhalb der Registerkarten der Dokumentfenster:
- BlueGriffon
- xxx
Anzeige von Klassen und IDs
Die meisten Webeditoren zeigen auch die zugewiesenen Klassen und IDs im Strukturpfad an. Dabei verwenden sie die Schreibweise von CSS und trennen die Klassennamen mit einem Punkt vom Namen des HTML-Elements und die ID-Namen mit einer Raute vom Namen des HTML-Elements.
Gibt es z.B. ein div, dem die ID mit dem Namen "banner" zugewiesen ist, und befindet sich darin ein Absatz, dem die Klasse mit dem Namen "leitspruch" zugewiesen ist, und befindet sich darin ein strong, so wird der Strukturpfad so dargestellt:
<body> <div#banner> <p.leitspruch> <strong>