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.
<p>HTML für die Struktur, <a href="https://www.mediaevent.de/css/">CSS</a> für das Aussehen</p>
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="eineSeite.html">Link</p></a>
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>
Viele Code-Editoren wie BBEdit und Brackets klappen verschachtelte Elemente ein, das hilft bei der Fehlersuche, wenn sich das HTML-Gerüst mal wieder den CSS-Regeln nicht beugen will.