Verwendung
Strukturelemente (sog. “Landmarks”) dienen der Aufteilung von Sinnabschnitten einer Seite in inhaltlich und funktional klar voneinander abgegrenzten Bereiche. Sie bieten die Semantik, um Browsern und Hilfsmitteln eine strukturierte Navigation anzubieten und helfen Nutzenden, ein konsistentes mentales Modell vom grundlegenden Aufbau aller Seiten zu erstellen.
Header & Footer 
In HTML bezeichnet <header> nicht nur den strukturellen bzw. visuellen Kopfbereich einer Seite, sondern kann theoretisch, wie auch <footer>, als über- bzw. unterschreibendes Element einer <section> benutzt werden. Daher wäre hier eigentlich eine zusätzliche Klasse zur Unterscheidung vonnöten, über die Header & Footer der Gesamtseite deklariert wird, damit die <header>- und <footer>-Elemente universeller einsetzbar sind.
Mangels konkretem Bedarf ist diese aber zurzeit im Design System nicht spezifiziert und eine mehrfache Verwendung wird auch nicht empfohlen. Grund hierfür ist eine Besonderheit in der Spezifikation: Wenn <header>- und <footer> innerhalb weiterer Landmarks wie <main>- oder <section> verwendet werden, dann verlieren sie ihren Landmark-Status und werden im Accessibility Tree als generische <div> behandelt – ein Einsatz an dieser Stelle bringt also keinerlei praktischen Nutzen.
Nav(igation)
Wenn eine Menge von Links eindeutig die Funktion anbietet, um vom aktuellen Kontext weg zu navigieren, dann stellt diese Menge mit hoher Wahrscheinlichkeite eine Navigation dar und muss mit dem <nav>-Element ausgezeichnet werden. Dies kann z. B. die Hauptnavigation im Header sein, oder auch Muster, die eine Navigation innerhalb einer Seite ermöglichen.
Allerdings sind nicht alle zufälligen Ansammlungen von Links auch immer gleich eine Navigation und es ist nicht notwendig, dass diese immer in einem <nav>-Element stehen. <nav> ist nur für größere Bereiche von eindeutigen Navigationslinks vorgesehen; typischerweise enthält der <footer>-Bereich oft eine Liste von unzusammenhängenden weiterführenden Links, die nicht als <nav> ausgezeichnet werden müssen.
Wenn mehrere <nav>-Elemente auf einer Seite benutzt werden, dann benötigen diese ein weiteres differenzierendes Merkmal, um sie voneinander zu unterscheiden. Dies kann mittels einer geeigneten Zwischenüberschrift innerhalb des Elements geschehen, oder mit Attributen wie <nav aria-label="Unternavigation">.
Main
Als sogenannte “Landmark” definiert <main> den wesentlichen Inhalt jeder Seite. Zusammen mit den anderen eigenständigen Bereichen Header und Footer bildet <main> den Seitenrahmen.
Die einleitende erste Überschrift des Hauptinhalt hat immer die oberste Überschriften-Ebene und Folge-Überschriften orientieren sich an dieser damit eröffneten Hierarchie. Eine Seite bzw. Maske darf nie mehr als ein <main>-Element haben. Landmarks wie <main> besitzen als reine Sectioning-Elemente kein eigenes Styling.
Do’s and Dont’s
So:
- Main umfasst den wesentlichen Inhalt einer Seite vollständig.
So nicht:
- Mehr als ein Main-Element auf einer Seite.
Section & Article
Als reines Strukturelement definiert <section> einen größeren, in sich geschlossenen logischen Abschnitt einer Seite. Erstes Kind-Element einer solchen Section muss eine Überschrift Hn sein oder ersatzweise ein geeignetes ARIA-Attribut zur Differenzierung verschiedener <section> einer Seite enthalten, wenn eine Überschrift nicht möglich ist.
Eine Section kann weitere strukturierende Elemente wie Article enthalten, mit denen eigenständige Inhalte weiter strukturiert und voneinander abgegrenzt werden. So kann eine Menge von Teaser-Kacheln <article> eine gemeinsame Gruppe <section> bilden. Der Einsatz ist aber nur sinnvoll, wenn es mindestens zwei Sections auf einer Seite gibt, die es zu differenzieren gilt.
Gemäß der HTML-Spezifikation bezieht sich <article> nicht auf einen Zeitungsartikel, sondern ist eher mit einem Artikel in einem Regallager vergleichbar, der in sich gekapselt ist und Sinn, Inhalt und Funktion behält, wenn man ihn in ein anderes Regal stellt.
Eine Seite, die aus nur einem Inhaltsblock besteht mit <main> <section> <article> … </article> </section> </main> aufzubauen wäre eine unnötige semantische Überfrachtung, von daher empfiehlt sich der Einsatz nur bei einer größeren Menge vergleichbarer Sections und Articles.
Landmarks wie <section> und <article> besitzen als reine Sectioning-Elemente kein eigenes Styling.
Do’s and Dont’s
So:
- Mit Bedacht einsetzen wenn eine Gruppierung strukturell sinnvoll erscheint.
- Sections können mehr als einen Unterabschnitt enthalten, der mit Article ausgezeichnet werden könnte.
So nicht:
- Zufällige, nicht zusammenhängende Elemente gruppieren.
- Übermäßiger Einsatz ohne sachlichen Grund.
Aside
Das <aside>-Element kennzeichnet einen inhaltlichen Abschnitt innerhalb einer Seite, der keinen direkten Bezug zum eigentlichen Inhalt der Seite hat. In der Regel wird <aside> für unwesentliche Inhalte wie Links zu weiterführenden Informationen zum Inhalt oder zum Anbieter der Seite als Marginalspalte verwendet.
Der Einsatz von <aside> ist nicht zwingend erforderlich. Eine übermäßige Verwendung kann im Gegenteil eine Seitenstruktur sogar semantisch überladen. Mit Bedacht eingesetzt bietet es, wie Section und Article, einen gewissen Komfort für Screenreader-Nutzende, wenn diese sich über die Landmark-Struktur orientieren und kann von ihnen benutzt werden, um wesentliche von unwesentlichen Inhalten zu trennen.
Auch <aside> als reine Landmark besitzt kein eigenes Styling.
Do’s and Dont’s
So:
- Weiterführende Informationen mit Relevanz zur aktuellen Maske.
- Navigation zu Inhalten außerhalb der Anwendung.
So nicht:
- Wesentliche Funktionalitäten der Maske in einer Marginalspalte.
- Navigation zu Inhalten innerhalb der Anwendung oder des Portals, hierzu muss das
<nav>-Element verwendet werden.