HTML main – Hauptinhalt der Webseite

main für den Hauptinhalt der Webseite

main stellt den Hauptinhalt der Webseite dar und sitzt dort, wo früher <div id="main">, <div id="page"> o.ä. saß. Das main-Element soll nur einmal im Dokument vorkommen und weder innerhalb eines header, footer oder article-Tags noch eines section-Tags sitzen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Sectioning Tags – Gliederung der Webseite

main gehört zu den Tags, die das Markup des Dokuments strukturieren: 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.