Gunnar Bittersmann: Container

Beitrag lesen

@@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.