@Scalletta

Article или section, без заголовка, как вернее?

Есть лендинг и один из разделов лендинга выглядит вот так
5d134c700e90e612019393.png

исходя из

5d134cdaa9519122301126.png
5d134ce185100344349857.png
5d134ce775562916767482.png
5d134d4e2dc99004100084.png
5d134d5645482323259503.png

я понимаю, что article является независимой частью на странице сайта, а секция зависящим элементом, какого то более крупного элемента.
т.е. в данном случае я понимаю что нужно делать как тут
5d134cdaa9519122301126.png

т.е. article > section*3 {h + p и т.д.}
(опираюсь на этот источник)
если же я сделаю как section > article*3 то на выходе это зависящая от чего либо секция, но у меня это независимый "раздел" и он может быть размещен в любом месте сайта.

сделав article > section*3 {h + p и т.д.}
я получаю:

5d134e528f6ac814151619.png
т.к. нет выраженого заголовка (даже если использовать section>article*3 будет тоже самое)
5d134e631560b879534984.png
так же в документации говорится о заголовках:
5d1351d6dc9f2247279730.png
5d1351e0e72f7540258016.png
и так же о том, что не нужно лепить section как обертку, лучше для этого использовать див, по этому решаю что подход section>article*3 или section>div*3 не верен, о чем так же говорится в этом источнике

если же делать div>article*3 или div>section*3 то будет:
5d134f720da8c075579480.png
т.е. этот раздел ни как не выделен, по факту это получается 3 разных раздела, но на деле то это один раздел с 3мя подразделами

теперь вопрос:

1. верно ли использовать article>section?опираясь на статью и документацию, я понимаю, что это верный подход но возможно я ошибаюсь
Эти разделы:
5d135003281f6340046476.png
я сверстал бы как article*4 > ..... (внутри могут быть section)
а не section*3> .....(внутри могут быть article)

2. как решить вопрос с невыявленным заголовком раздела? один из вариантов, сделать там и просто скрыть его стилями, тогда семантически все вродь читается, но верно ли это?

P.S. прошу не ругать за мой "русский" и не писать в стиле "ой да это ни кому не нужно" и т.п.
  • Вопрос задан
  • 2960 просмотров
Решения вопроса 1
Заголовки у секций должны быть в любом случае. Необходимо думать и о accessibility сайта. Скринридеры должны четко видеть структуру сайта. Есть разные способы: aria-label, aria-labeledby, visually-hidden паттерн (https://htmlacademy.ru/blog/useful/css/short-12). Подробнее об этих методах почитайте в статье на css-tricks https://css-tricks.com/how-to-section-your-html/#a...
А разметка в вашем примере будет примерно такая
<section class="page-section advantages">
  <h2 class="visually-hidden">Наши преимущества<h2>
  <div class="container advantages__container">
    <div class="advantages__item">advantage1</div>
    <div class="advantages__item">advantage2</div>
    <div class="advantages__item">advantage3</div>
  </div>
</section>
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
@noeer
ИМХО правильней сделать section>article*4, так как section задаёт раздел документа и может применяться для блока новостей. (htmlbook.ru/html/section)
А article задает содержание сайта вроде новости, статьи, записи блога (htmlbook.ru/html/article)
Хотя валидатор w3 принимает без ошибок оба варианта.

Заголовки должны должны быть и у section, и у article. Хотя это не критично. Тот же валидатор выдает предупреждение Warning, а не ошибку.
Скрывать заголовок не стоит. Страница должна быть одинаковой для пользователей и поисковиков.
Ответ написан
Комментировать
1. Верно. Все такие секции на странице (помимо main) можно вкладывать друг в друга. Если быть более точным, в спеках есть специальное поле у таких значимых секций, забыл уже, как называется - давно спеку читал. Но - можно. У article может и footer быть.
2. Если заголовка нет, его можно не указывать. Секция и артикль может и не иметь заголовка. Но если он есть, можно его добавить. Скрывать стилями лучше не надо, за это могут сделать атятя.
Ответ написан
Комментировать
Stalker_RED
@Stalker_RED
Я как-то сомневаюсь, что эти штуки
5d134f720da8c075579480.png
являются статьями или разделами.

Возможно их стоит оборачивать во что-то совсем другое, типа dl dt, или даже просто в дивы.
Оставьте статьи для контента.
Ответ написан
Комментировать
KornevaViktoria
@KornevaViktoria
Frontend Developer
1 вопрос:
Scalletta, вообще, перечитав еще раз различия между этими тегами, получается, что в вашем случае, должен быть div (обертка с фоном), внутри которого article c тремя section, у которых есть заголовок (например, 1-8 мин) и собственно контент.

Почему так?
div - просто обертка нашего блока, задав класс которой, мы можем оформить наш блок.
article - позволяет вырвать блок из страницы, содержит самодостаточную информацию - "Преимущества". Добавив этот блок на любую другую страницу - будет понятно о чем он.
section - просто связанный контент - есть заголовок (1-8 человек) и есть текст, относящийся к заголовку.

Другой вопрос - дизайн сайта - подумал ли дизайнер о доступности сайта? (ведь можно было бы добавить article заголовок - и тогда все было бы семантично правильно сделано)

2 вопрос:
нет, так делать не стоит, зачем загружать страницу блоками, которые никогда не будут на ней отражатся? Это ведь как минимум увеличивает вес и скорость загрузки страницы.
Ответ написан
Комментировать
@Scalletta Автор вопроса
Жаль в документации слишком мало примеров, нет явного ответа.
1. использовать section or article? - одни говорят что секции лучше другие что артикли, из документаций я пока на стороне артиклей.
2. делать ли скрытые заголовки? - в основном все говорят, что не нужно так делать (хоть этот вопрос мы решили), но смотря через оутлинер и видя untitled section or untitled article глазам не приятно.

Подожду ещё, возможно найдется избранный, который всё разъяснит и подкрепит свои слова документацией и прочими пруфами
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы