Имеет ли смысл тэг section, если он является единственным крупным смысловым блоком в main?

Question

[Muvka]

Есть страница со статьей. Вот сокращенный код

<main id="information-information" class="main main--flex page__main">
  <div class="main__breadcrumbs">
    <div class="breadcrumbs container" role="navigation" aria-label="Хлебные крошки">
      <ul class="breadcrumbs__list">
        
      </ul>
    </div>
  </div>
  <div class="article main__block">
    <div class="article__top">
        <h1 class="title article__title">{{ heading_title }}</h1>
        <p class="article__intro">{{ intro }}</p>
    </div>
    <div class="text-content article__content">{{ description }}</div>
    <a href="/" class="button button--huge">Вернуться в меню</a>
  </div>
</main>

Сейчас у меня article - это обычный div.

Comments

[Ankhena]

Если это статья, то это article.
Хлебные крошки я бы постаралась не включать в main, но это так.. капризы.

Но не понятно зачем нужны аж 2 лишние обертки у хлебных крошек main__breadcrumbs и breadcrumbs.
И вот эта article__top. Но, возможно, оправдано дизайном. Но тогда, семантически это header.

[Muvka]

Ankhena, Потому что в крошках фон тянется на 100%, а сами крошки в центровщике. Вторая обертка для задания роли и названия. А вообще, крошки на каждой странице разные - значит это не повторяющийся контент. Хотя я подумаю, может действительно их стоит вынести... Возможность есть. И даже это будет полезно мне, т.к. крошки - это единственный блок, который тянется на всю ширину. Остальные блоки в центровщике. Про article - я боюсь использовать этот тег. Он странный, как по мне.
P.S. article__top для фона нужен. Не дает ссылку вставить(

[Ankhena]

Muvka, 1. role можно перенести в ul.
2.фон ок, если картинкой. И тогда этот блок можно сделать header'ом, вместо div.
3. Странно использовать article для статьи??
4. main это главное содержимое страницы, а не то, что меняется. header тоже может быть разным на разных страницах.

[Muvka]

Ankhena, 1. Если role перенести на ul, валидатор выдает предупреждение, что я не так aria-label использую.
3. article - это что-то, что можно вырвать с сайта и вставить на другой сайт и все будет понятно. Я не уверен, что все статьи достаточно отвязаны от сайта... Это статьи магазина - в них вся инфа о конкретном магазине. Статьи в блоге - да - можно в article поместить, а тут меня сомнения гложут.

[Ankhena]

Muvka, 1. тогда на первый div.

[Muvka]

Ankhena, Тоже верно. Спасибо вам за ответы.

[Ankhena]

Muvka, я бы вообще не стала задавать role navigation для хлебных крошек. Всё таки это синоним тега nav, а его рекомендуется использовать только 1 раз на странице для основной навигации по странице/сайту.

[Muvka]

Ankhena, Ну насколько я знаю, тег nav как то подгружает фоном страницы, на которые ведут эти ссылки (если я правильно понял), и именно поэтому не рекомендуется использовать для всех навигаций. А роли такого не делают, но дают понять, в какой именно навигации находится пользователь.

[Ankhena]

Muvka,

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

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

[Muvka]

Ankhena, Ну я почти это и сказал. Пререндер содержимого ссылок. А role="navigation" такого не делает, вроде как. Но при этом дает читалке инфу, что это навигация и какая именно навигация. Или я не правильно что-то понимаю?

Answer 1

[Алексей]

Если div в классом article вы замените на тег article то валидатор html w3 выкинет ошибку. Т.к. у article обязательно должен быть дочерний заголовок. Не потомок, а именно дочерний.

Comments

[Ankhena]

Т.к. у article обязательно должен быть дочерний заголовок.

Не вводите никого в заблуждение.
Не должен, а рекомендуется. И не ошибку, а предупреждение.