Какая семантика лучше для списка статей?
Я спрашивал себя о разметке списка записей в блоге.
Что может быть так:
Случай 1:
<article>...</article>
<article>...</article>
<article>...</article>
или случай 2:
<ol reversed>
<li><article>...</article></li>
<li><article>...</article></li>
<li><article>...</article></li>
</ol>
Пример выглядит логичным: "это список записей по порядку дат"
Другим примером является список важных шагов для использования продукта:
<ol>
<li><section><h1>step 1</h1></section></li>
<li><section><h1>step 2</h1></section></li>
<li><section><h1>step 3</h1></section></li>
</ol>
Чтобы получить план, как:
product name
description
how to use
step 1
step 2
step 3
customer reviews
etc
Как вы думаете, это слишком много разметки для этого контента?
Моя цель - получить лучший синтаксис и схему HTML5, но я не хочу заполнять HTML бесполезными тегами.
РЕДАКТИРОВАТЬ: реальный вопрос не в том, что лучше, а в том, чтобы узнать, что разработчики думают об этом по-разному. Потому что есть много способов сделать что-то, но иногда, если 2 способа верны, возможно, есть более "логичный" или "соответствующий" способ сделать это.
2 ответа
ol
должен использоваться только в том случае, если "изменение порядка изменит смысл". То, что контент как-то отсортирован, не обязательно означает, что ol
является целесообразным.
Если вы должны использовать список (будь то ol
или же ul
) зависит от вашего фактического содержания и его контекста, на него нельзя ответить вообще. Спецификация HTML5 определяет эти списки как "список элементов", не указывая, что это за список или что квалифицируется как элемент.
Возможное / субъективное эмпирическое правило (со многими исключениями): посмотрите на свой контент и спросите себя, назовете ли вы его списком, и можете ли вы изобразить его с типичными пунктами.
Страница под названием "Блог", на которой отображаются 10 полнотекстовых сообщений в блоге? Возможно нет.
Боковая панель под названием "Похожие сообщения", отображающая 10 ссылок на сообщения в блоге? Вероятно, да.
Это говорит о том, что "сложность" контента также может играть роль, поэтому другое возможное / субъективное практическое правило (с еще большим количеством исключений): если элемент имеет заголовок (т. Е. Это раздел) и длинный контент, вы можете не нужен список.
Шаги, чтобы использовать продукт, где каждый шаг состоит из длинных объяснений с изображениями? Возможно нет.
Шаги по использованию продукта, где каждый шаг состоит из короткого предложения? Вероятно, да.
Согласен с unor.
Согласно стандарту:
Хотя включение элементов заголовка (например, h1) внутри элементов li допустимо, это, скорее всего, не передает семантику, задуманную автором. Заголовок начинает новый раздел, поэтому заголовок в списке неявно разбивает список на несколько разделов.
https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-элемент
Так что я думаю, что если контент может иметь заголовок - его не следует включать в список.