Sectioning Tags – Gliederung der Webseite
main gehört zu den HTML-Tags, die das Markup des Dokuments strukturieren und untergliedern: article, section, header, footer, nav und aside. Auch main wirkt gegen die Schwemme von div-Tags mit langen Listen von CSS-Klassen, die das Markup vor HTML5 in ein wildes und wirres Knäuel verwandelten.
<!Doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Meine helle Seite</title>
</head>
<body>
<header>Meine Seite</header>
<nav><a href="/">HOME</nav>
<main>
<article>
<h1>Mein Betrag</h1>
<p></p>
</article>
<aside>
<p>Mehr dazu … </p>
</aside>
</main>
<footer>
2019
</footer>
</body>
</html>
main ist ein Element ohne jegliche Eigenschaft, so dass es am besten per CSS in ein Block-Element umgewandelt wird.
main { display: block; }
main als Landmark für Screenreader
Das Attribut role="main" wird in einem main-Tag nicht benötigt. Der Validator warnt zart: main role is unnecessary for element main. Neben der besseren Erkennbarkeit zeigt main den Screen Readern direkt, wo der zentrale Inhalt der Seite beginnt.
Benutzer mit einer Sehbehinderung brauchen einen schnellen Zugang zum eigentlichen Inhalt der Webseite. Webseiten, die diesem Wunsch entgegen kommen, setzten früher einen verborgenen Link zum eigentlichen Inhalt, mit dem Aufkommen von ARIA kennzeichneten sie die Inhalte durch @role="main" für Screenreader durch Landmarks. Andere Landmarks sind z.B. banner für den Header der Seite, role="complementary", wo wir heute ein aside-Element setzen.
Aber sowohl der verborgene Link als auch ARIA @role=main sind nur ein Notbehelf für diejenigen, die an die einfachen Hilfsmittel für die Welt außerhalb der sichtbaren grafischen Oberfläche denken.
Wenn standardgemäß ein main-Tag gesetzt wird, werden weder der verborgene Link noch role="main" gebraucht. So ganz nebenbei dürfte es auch den Suchmaschinen anhand des main-Tags leichter fallen, den eigentlichen Inhalt der Seite nach all den Headern, Slidern und anderen Einblendungen zu finden.
main: Flow Content
main ist Flow Content wie footer und header. Innerhalb des main-Elements ist alles erlaubt: div-Tags, article und section-Elemente.
