@@franzsen
<main> <div>Haupt</div> <div>Navi</div> <div>Inhalt</div> </main>
Wie MrMurphy schon sagte, ist main
bereits ein gruppierender Container, ein weiteres div
ist nicht erforderlich.
Was noch erforderlich ist, ist das role
-Attribut fürs main
-Element, damit Browsern und assistieven Technologieen dessen Rolle bekannt ist: <main role="main">
Aber: Das Markup stimmt vermutlich so nicht.
Zur Auszeichnung der Navigation sollte das nav
-Element verwendet werden, damit Browsern und assistieven Technologieen dessen Rolle bekannt ist.
Und: die Navigation gehört nicht zum Hauptinhalt, also nicht ins main
-Element.
Was bei dir „Haupt“ und was „Inhalt“ bedeuten sollen, ist mir unklar.
Die Struktur könne eher so aussehen:
<div>
<header>Header</header>
<nav>Navi</nav>
<main role="main">Inhalt</main>
</div>
Aber auch dieses gruppierende div
ist nicht erforderlich, da mit body
schon ein gruppierender Container vorhanden ist:
<body>
<header>Header</header>
<nav>Navi</nav>
<main role="main">Inhalt</main>
</body>
Außerdem könnte es sinnvoller sein, die Navigation im Markup hinter dem Hauptinhalt zu notieren:
<body>
<header>Header</header>
<main role="main">Inhalt</main>
<nav>Navi</nav>
</body>
LLAP 🖖
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.