Webseiten Bereiche (Sectioning)

Sectioning Elemente

Die Sectioning Elemente sind:
body, h1, h2, h3, h4, h5, h6, hgroup, section, nav, article, aside, header, footer, adress

siehe auch HTML5 Handbuch von Stefan Münz

Im Dokumentkörper body kann man die meisten Seiten mit den üblichen Elementen wie Überschriften und Absätze strukturieren.

In HTML4 wurde zwischen Block- und Inline- Elementen unterschieden. Diese Modell wurde in HTML 5 durch den sogenannten Flow Content ersetzt. Neben einer komplexeren Struktur gibt es viele neue Elemente, die dem Aufbau einer Webseite gerecht werden. Auch wenn einige Browser diese Elemente noch nicht kennen, so sollte man sie bereits einsetzen. Mittels CSS kann man das Layout dieser Elemente beeinflussen.

Einige Elemente des Content Models Sectioning können mit den Elementen header und footer strukturiert werden. Es sind die Elemente: acticle, aside, nav, section. Diese 4 Elemente bilden eine Art Unterdokument, in denen eine eigene Outline Strukur durch die Überschriftenelemente (h1-h6) gebildet werden kann. Man schafft mit Sectioning eigene Erstreckungsräume. Dadurch sind Überschriften innerhalb dieser 4 Sectioning Elemente unabhängig von denen außerhalb.

Eine Überschrift gilt für alle Inhalte bis zur nächsten Überschrift gleicher oder höherer Ordnung. Durch Überschriften entsteht also eine natürliche Outline Struktur. Mit dem Sectioning Content Modell kann diese natürliche Ordnung aufgebrochen werden.

Während man in strict HTML4 eine h1 nur einmal innerhalb der Seite benutzen sollte, kann man nun in den Elementen article, aside, nav, section eine eigene Überschriftenhierachie mit einer h1 beginnen und den anderen Überschriften (h2 - h6) fortsetzen.

Hier können Sie eine Outline Struktur testen.

 

Normalize

Bis auf die Überschriften (h1-h6) sind diese Sectioning Elemente mit HTML5 neu hinzugekommen. Es sind Blockelemente, da heißt es entsteht eine neue Zeile, sofern der Browser diese Elemente erkennt. Vor HTML5 wurden stattdessen das div Element als Container verwendet, welches mittels eines id-Attributs gekennzeichnet war z.B.:

<div id="footer">...</div> Stattdessen kann man nun die neuen Elemente einsetzen.

Damit auch ältere Browser diese Elemente als Blockelemente erkennen, sollten sie mit CSS als Blockelemente ausgezeichnet werden z.B.: nav {display: block}. Es ist jedoch einfacher die normalize.css von Nicolas Gallager einzubinden. Siehe hierzu das Thema Browserkompatibilität.