Verwendung
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 von einander 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.
Landmarks wie <aside> besitzen ebenso 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.