Welche HTML-Tags dürfen in welchem HTML-Element sitzen?
Sobald ein Element in einem anderen Element sitzt, müssen Regeln für das Verschachteln beachtet werden:
- Wenn verschachtelte HTML-Tags geöffnet werden, müssen sie in umgekehrter Reihenfolge geschlossen werden. Wird ein p-Tag in einem div-Tag geöffnet, kommt zuerst das schließende p-Tag, und dann erst das schließende div-Tag.
- Nicht jedes Element darf in jedem Element liegen. Im Beispiel liegt das a-Tag zwischen dem öffnenden und schließenden p-Tag. Allerdings darf innerhalb eines p-Elements kein weiteres p-Element sitzen.
- Einige Elemente sind nur in bestimmten Elementen erlaubt – z.B. darf ein li-Element nur innerhalb von ul, ol oder menu-Tags eingesetzt werden.
- Umgekehrt gibt es Elemente, die nicht für sich allein stehen, sondern erst als korrekt gelten, wenn sie wiederum bestimmte Elemente enthalten. Dazu gehören z.B. table, dl, ul, ol und menu.
HTML p-Element
┌───────────────────────────────────┴───────────────────────────────────┐
│ │
▼ ▼
<p>HTML für die Struktur, <a href="style.html">CSS</a> für das Aussehen</p>
▲ ▲
│ │
└────────────┬───────────┘
HTML-a-Element
HTML-Tags dürfen zwar verschachtelt werden, aber das Ende eines HTML-Tags darf ein anderes öffnendes Tag nicht kreuzen:
┌────────────────────┴────────────────────┐
│ │
▼ ▼
<p>Hier ist der <a href="style.html">Link</p></a>
▲ ▲
│ │
└──────────────┬──────────────┘
HTML-a-Element
Das Verschachteln von HTML-Elementen hat seine Grenzen. Welche Elemente in einem Element erlaubt sind, ist für jedes Element festgelegt. In einem p-Tag darf z.B. weder ein div-Element sitzen noch eine Tabelle mit dem table-Tag. In einem div-Element hingegen darf so ziemlich alles stecken: table, picture oder figure und weitere div-Elemente. Welche Tags innerhalb eines HTML-Elements benutzt werden können, muss für jedes HTML-Tag geprüft werden.
Dabei verzeihen die Browser viele Fehler und korrigieren still und leise. Trotzdem dürfen HTML-Fehler nicht auf die leichte Schulter genommen werden, denn Fehler im HTML-Code führen zu Nägelkauen und Ohnmachtsgefühl, sobald CSS und Javascript zum Zug kommen.
Block-Elemente, inline-Elemente, leere Elemente
Elemente, die zu einem Zeilenumbruch führen, werden auch als Block-Elemente bezeichnet. Typische Block-Elemente sind z.B. h1, … h6, p, div.
Elemente, die nicht zu einem Zeilenumbruch führen, werden auch als Inline-Elemente bezeichnet: Typische Inline-Elemente sind a, img, input, span.
So ganz einfach nach Block- und Inline-Elementen lassen sich HTML-Elemente nicht einordnen. Grob:
- Grün unterlegt: Block-Element
- Orange unterlegt: Inline-Element
Kinds of content HTML-Element-Kategorien auf whatwg.org
Selbstschließende bzw. leere HTML-Tags
Es gibt eine Reihe von HTML-Tags, die kein Ende-Tag haben (im Standard als »void« oder »empty« bezeichnet).
<img src="bild.png" width="100" height="100" alt=""> <br>
Beispiele für »leere« Tags ohne Ende-Tag sind img, br, link, meta und input.
Einrücken und Ausrücken
Am Anfang dieser Seite ist der Begriff gute Programmierpraxis gefallen. Das Einrücken und Ausrücken der verschachtelten HTML-Tags gehört dazu: Nicht einfach ein guter HTML-Stil, sondern ein besserer Überblick über die verschachtelte Struktur ist der Bonus.
▶<section title="Bilder auf Webseiten">…</section> ▶<section title="HTML-Tags verschachteln">…</section> ▶<footer>…</footer>
Gute Code-Editoren wie BBEdit, Visual Studio Code oder Phoenix Code klappen verschachtelte Elemente ein, das hilft bei der Fehlersuche, wenn sich das HTML-Gerüst mal wieder den CSS-Regeln nicht beugen will.
