HTML – Struktur – verschachteln und gruppieren

HTML Einstieg in Webseiten mit HTML

HTML-Elemente bilden eine Baum-Struktur, in dem allerdings die Wurzel oben sitzt: Im führenden html-Element sitzen head und body. Alles, was der Besucher sehen soll, liegt zwischen dem öffnenden und dem schließenden body-Tag.

Innerhalb eines HTML-Elements dürfen weitere Elemente liegen: Verschachteln ist erlaubt.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

HTML-Elemente verschachteln

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.

Zeilenumbruch

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.

rt rp rtc rb html head body main header nav article section aside footer h1 h2 h3 h4 h5 h6 div p hr pre blockquote address ol ul li dd figure figcaption table caption col colgroup tbody thead tfoot td th tr a em i strong b small cite q dfn abbr data time code var samp kbd sub sup span ins del mark br u ruby bdi bdo wbr s img picture source iframe embed object param video audio track area map svg math form fieldset label legend input datalist button select option optgroup textarea output progress meter canvas details summary dialog slot dl dt menu

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 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.