Die Qualität einer Webanwendung entscheidet sich oft schon vor der ersten Zeile CSS. Eine logische, wohlgeformte Dokumentenstruktur ist das Skelett, das alles zusammenhält. Sie bestimmt nicht nur die Lesbarkeit des Codes, sondern auch, wie effizient Browser die Seite rendern.
HTML5 Sectioning Elements
Mit HTML5 wurden Elemente eingeführt, die eine klare Abgrenzung von Inhaltsbereichen ermöglichen. Diese "Sectioning Elements" definieren den Scope von Überschriften und erstellen eine implizite Gliederung (Outline) des Dokuments.
<section>Thematische Gruppierung von Inhalten, typischerweise mit einer eigenen Überschrift.
<article>Unabhängiger Content-Block, der auch losgelöst vom Kontext Sinn ergibt.
<aside>Inhalt, der nur am Rande mit dem Hauptthema zu tun hat (Sidebars, Glossare).
<nav>Sektions-Container für Navigationslinks, essentiell für Screenreader-Navigation.
Logische DOM-Hierarchie
Eine flache Hierarchie ist oft performanter, aber eine zu flache Struktur opfert die Semantik. Das Ziel ist eine "Landmark-basierte" Architektur. Hier ist eine interaktive Visualisierung der empfohlenen Schachtelung:
Komplexe Implementierung
In modernen Applikationen reicht ein einfaches Header-Main-Footer Schema oft nicht aus. Besonders bei Dashboards oder Content-Hubs kommen verschachtelte Sektionen zum Einsatz. Achten Sie auf den Outlining-Algorithmus:
1<!-- Die Wurzel der Applikation -->
2<body>
3 <header role="banner">
4 <nav aria-label="Hauptnavigation">...</nav>
5 </header>
6 <main id="content">
7 <article class="main-entry">
8 <header>
9 <h1>Architektur-Guide</h1>
10 <p>By Marc D. on <time>2024-10</time></p>
11 </header>
12 <section aria-labelledby="sub-heading">
13 <h2 id="sub-heading">Detaillierte Analyse</h2>
14 <p>Strukturelle Tiefe ist hier entscheidend...</p>
15 </section>
16 <footer>
17 <p>Schlagworte: <a>HTML5</a>, <a>DOM</a></p>
18 </footer>
19 </article>
20 </main>
21 <footer role="contentinfo">...</footer>
22</body>gavelBest Practices für Profis
- 01.Nutzen Sie <main> exakt einmal. Es markiert den einzigartigen Kern der aktuellen Seite.
- 02.Jede <section> sollte idealerweise eine Überschrift haben. Falls nicht, ist es meist ein <div>.
- 03.Verschachteln Sie <article> Tags für Kommentare innerhalb eines Blog-Posts.