Aufteilung und Struktur: Sectioning
Bevor section, article, header und footer in HTML erschienen wurden Webseiten mit unzähligen div-Elementen strukturiert und so das Layout der Seite gesteuert. Für CSS und Javascript wurde den div-Elementen eine Bedeutung durch class- und id-Attribute zugewiesen, so dass am Ende eine Flut von Klassen in einer Flut von div-Elementen saß. CSS und Javascript wurden immer undurchschaubarer.
Für den Besucher tritt die Stuktur der HTML-Seite durch das grafische Layout klar hervor, aber für Screen Reader, Sprachausgabe und die Suchmaschinen liegt nur ein Schwall von div-Tags ohne Aussage über die Struktur des Inhalts vor.
article, section und nav bilden die Struktur einer Webseite ähnlich wie das Inhaltsverzeichnis eines Sachbuchs in hierarchische Kapitel ab.
Für die Semantik der HTML-Seite stehen header, main und footer zur Verfügung.
< article >
Inhalte, die unabhängig für sich allein stehen könnten – z.B. ein Post in einem Blog – sind in article-Elementen gut untergebracht. article sollte nicht mit einem Artikel in einer Zeitschrift / Magazin verglichen werden, eher mit einem Artikel im Angebot eines Warenhauses, der ebensogut auf einer anderen Etage präsentiert werden könnte.
a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable
article sagt den Suchmaschinen, dass hier ein in sich geschlossener Inhalt vorliegt, während header, nav und footer den Rahmen für den Inhalt darstellen.
< section >
HTML section steht für Abschnitte des Inhalts. Sections haben i.d.R. eine Überschrift (der Validator wünscht Überschriften explizit: Section lacks heading) und können Kapitel oder die Beschreibung eines Produkts sein. Wenn ein HTML-Objekt für CSS und Javascript gebraucht wird, ist weiterhin ein div-Tag angebracht.
Ein guter Anhaltspunkt, wo section und wo ein div-Element eingesetzt werden sollte, ist eine Zusammenfassung des Inhalts der Webseite: Wenn Inhalte in einer Liste einen eigenen Punkt haben, ist ein section-Tag die bessere Wahl als ein div-Tag.
Oder noch einfacher: Wenn man, wie der Validator wünscht, eine Überschrift drüber setzen kann, dann kann ein Bereich in ein section-Element gesetzt werden.
Anders als article ist section ein Bereich, der nicht unbedingt allein stehen könnte. Der Standard hat die Grenze zwischen article und section nur hauchzart am »self-contained« ausgemacht: Das erklärt, warum wir mit diesen beiden Begriffen immer wieder ins Schlingern kommen. Theoretisch können article-Tags innerhalb von section-Tags stehen. Diese Struktur wird vom Validator ebenfalls als korrekt anerkannt.
<HTML header >
header ist für die Einleitung des Inhalts gedacht und wird i.d.R. die typischen Kopf-Elemente wie Überschriften, Zeit und Autor enthalten. header und section gehen sozusagen Hand-in-Hand.
< nav >
Das nav-Tag ist für Links zu anderen Seiten und zu Bereichen innerhalb derselben Seite reserviert. Das nav-Element soll nur für die Haupt-Navigation der Seite benutzt werden und nicht für beiläufige Links einer Seite.
< footer >
Ein HTML-footer-Element nimmt auf, was der Name schon besagt: Die Informationen im Fuß eines Artikels oder Beitrags und die Informationen im Fußbereich der Seite. Genauso wie header kann auch footer in jedem section-Objekt eingesetzt werden.
Neben wichtigen Links wie Impressum und Datenschutz, die im Footer oft wiederholt werden, ist das Footer-Element ein guter Platz für das address-Element mit den Kontaktinformationen zum Autor oder Publisher des Dokuments.
< main >
HTML main stellt den Hauptinhalt der Seite oder Anwendung dar und soll nur einmal innerhalb einer Seite oder Anwendung eingesetzt werden. Viele Webseiten benutzen einen Wrapper <div id="main">…</div> – das HTML main ersetzt diese Konstruktion.
In diesem Sinne soll main nicht innerhalb von Tags wie section, header, footer, aside, nav oder article gesetzt werden. Inhalte, die auf vielen Seiten wiederholt werden – wie Logos, Suchfelder und Links der Navigation – sollten nicht innerhalb des main-Elements sitzen.
Mehr zu HTML main
address
Das address-Tag ist zwar ein altes HTML-Tag, hat aber mit HTML5 seine Bedeutung geändert und wird ebenfalls zu den Sectioning-Elementen gerechnet.
Beispiele für article und section
Die Struktur von section, header und article sieht anfangs aufgeblasen auf. Sie sind optimal für das Inhaltsverzeichnis von eBooks. Das Inhaltsverzeichnis eines eBook über Fotografie könnte z.B. wie folgt aussehen:
Fotografie von der Praxis zu den Grundlagen ........ 1 Die Kamera Der Aufbau der Kamera ....................... 15 Spiegelreflexkameras ........................ 29 Systemkameras ohne Spiegel .................. 35 Grundlagen Belichtungszeit und Blende .................. 67 PSAM Die Kreativ-Programme .................. 82 Wie man sich gegen seine Kamera durchsetzt Belichtungskorrekturen ..................... 104 Manuell scharfstellen .......................127
article, aside, section, nav und h1 … h6 bilden den Anfang eines neuen Abschnitts. Die erste Überschrift in jedem Absatz ist die Überschrift einer section. So kann z.B. die Übersichtsseite eines Blogs aufgebaut sein:
<body>
<header>
<h1>Video in Webseiten</h1>
</header>
<article>
<h2>Dateiformate für Video</h2>
<section>
<h3>MP4-Video</h3>
<p> Teaser </p>
</section>
<section>
<h3>OGG-Video</h3>
<p> Teaser </p>
</section>
</article>
<article>
<h2>Video-Codecs</h2>
<section>
<h3>H.264</h3>
<p> Teaser </p>
</section>
<section>
<h3>Theora OGG</h3>
<p> Teaser </p>
</section>
</article>
</body>
HTML section muss nicht innerhalb von article sitzen – genauso gut ginge es umgekehrt. Der Validator erkennt beide Aufbauten als korrekt. Ebensogut kann article in article verschachtelt werden. Wie bereits erwähnt: Der Unterschied zwischen article und section besteht nur im Grunde genommen nur aus dem »selbst-enthaltend« für article.
Auch wenn mehr als eine Überschrift h1 erlaubt ist: Der Validator warnt, dass Hilfsmittel wie Screen Reader damit noch nicht klar kommen.