Как семантически верно расположить боковое меню?

Question

Вопрос в следующем:

Как мне правильно расположить боковое меню?

Я говорю про HTML-разметку.

Пример такого меню на фото:

Так вот, я столкнулся с мыслью, что в целом, можно просто накинуть flex на body или dashboard-main и спозиционировать меню слева.

Как то так:

<body>
    <div class="dashboard-main">
        <header class="header">
            123
        </header>
        <main class="main">
            123
        </main>
    </div>
</body>

Но я не уверен в семантической правильности такого решения потому что насколько я знаю нельзя в body класть div и только потом, header и main.

Или может не париться и просто сделать body -> header,main?

Может кто-то подсказать?

Answer 1

Один из вариантов это воспользоваться тегом aside, что является достаточно распространенной практикой, например такую реализацию можно встретить на сайте IMDb:

<body>
    <div class="dashboard-main">
        <header class="header">
            123
        </header>
        <main class="main">
            123
        </main>
    </div>
    <aside>Ваше меню</aside>
</body>

БЛОГ НА HUSL

Как семантически верно расположить боковое меню?

Ответы (1 шт):