Как лучше сделать такой блок на сайте?

Question

[Overlord934]

Как такое оформлять в html? Оборачивать все в main? И нужно ли там где "баланс" писать header? Блок на сайте всего один и он на скрине.

Comments

[Алан Гибизов]

Если нет кода, не надо ставить тэг языка.

[Froggyweb]

вообще пофиг. div будет достаточно. главное- остальное.

[Максим]

Название блока не имеет значения но имеет значение css в котором будет стилизоваться блок с этим названием и именно таким образом

Answer 1

[szQocks]

как-то так

<div>
  <header>
  лого
  nav
  див
  </header>
  <main>
    <section></section>
  </main>
</div>

Comments

[Ankhena]

Лого, нав принципиально не могут быть в aside.

[szQocks]

Ankhena, https://html.spec.whatwg.org/multipage/sections.ht...

а на счёт лого - простой див ссылкой внутри или просто ссылка, див же может быть в aside или ссылка

[Ankhena]

szQocks, в aside складывают блоки, напрямую не связанные с содержимым сайта. Рекламные баннеры и подобное.
Лого и nav (т.е. основную навигацию) никак нельзя назвать несвязанными с основным содержимым.

[szQocks]

Ankhena, вы не правы, я скинул ссылку на доки, почитайте.

[Ankhena]

szQocks, могу даже перевести

Элемент «aside» представляет собой раздел страницы, состоящий из содержимого, которое косвенно связано с содержимым вокруг элемента «aside», и которое можно считать отдельным от этого содержимого.

Лого и основная навигация напрямую связаны содержимым.

Развернуто: то, что находится в aside можно выкинуть со страницы и основной смысл, по большому счету, не потеряется.

Загуглите основные ошибки использования aside. И, наверное, первая из них будет о попытке сложить навигацию, особенно, если она в левом столбце в aside.

[szQocks]

Ankhena,

aside Элемент представляет раздел страницы, состоящий из содержимого, которое косвенно связано с содержимым вокруг aside элемента и которое можно рассматривать отдельно от этого содержимого. Такие разделы часто представлены в виде боковых панелей в печатной типографии.

в документации есть пример, где в aside вложено nav со списком - пусть в примере оно и не является основным может меню а как дополнительным - но если макет так устроен на скрине что нет другого меню, почему бы в aside не быть основному меню nav ? по документации - это не является каким-то не верным решением. И к тому же хочу снова обратить внимание что "aside Элемент представляет раздел страницы, состоящий из содержимого, которое косвенно связано с содержимым вокруг aside"

останусь при своём мнении, раз не можем найти компромисс

[szQocks]

Ankhena, в гугле кстати пишут что можно вкладывать навигацию в aside, не знаю откуда вы взяли что - нельзя

[Ankhena]

szQocks, значит, пора переходить к nav.
Да, спека разрешает засовывать в nav любые ссылки. Но в ней же написано, что мы поможем пользователям с ограниченными возможностями, если будем оборачивать в nav только основные блоки навигации. И именно так принято в сообществе.

В примере автора этого вопроса, меню это всё таки основная навигация и её нельзя безболезненно выкинуть со страницы и считать, что всё норм. Т.е. aside не очень подходит.

останусь при своём мнении, раз не можем найти компромисс

Тут я никак не возражаю, да и компромисс нам не нужен :) Семантика позволяет интерпретировать блоки по-разному.
Только хочу, чтобы автор вопроса и другие интересующиеся подходили к вопросу осознанно, понимая что и для чего пишут.

[szQocks]

Ankhena, прогуглил все эти дела, я сделал вывод что лучше бы следовало сделать так

<div>
  <header>
  лого
  nav
  див
  </header>
  <main>
    <section></section>
  </main>
</div>

я уверен что заменив aside на header - будет 100% лучше для поисковиков

так что на счет того что вы говорили что aside не очень подходит - соглашусь

[Ankhena]

szQocks, много лайков