Списки

Список покупок и рецепт являются списками, но только один из них ломается, если поменять порядок. Для каждого в HTML свой элемент.

Маркированные и нумерованные списки

Если порядок пунктов не важен, используй маркированный список <ul>. Браузеры ставят перед каждым пунктом маркер. Если порядок важен, как в шагах рецепта или в рейтинге, используй нумерованный список <ol>, и браузер сам пронумерует пункты. В обоих случаях каждый пункт является элементом <li> (list item), и прямо внутри <ul> или <ol> разрешены только элементы <li>. Текст и другие элементы помещаются внутрь пунктов.

<h2>You will need</h2>
<ul>
  <li>500 g flour</li>
  <li>10 g salt</li>
  <li>350 ml warm water</li>
</ul>

<h2>Method</h2>
<ol>
  <li>Mix everything in a bowl.</li>
  <li>Leave it covered for 12 hours.</li>
  <li>Shape and bake at 230 degrees for 40 minutes.</li>
</ol>

Почему бы не набрать номера или тире самому? Потому что тогда браузер не знает, что это список. Экранный диктор объявляет настоящий список вместе с его длиной, например «список, 3 элемента», так что слушатель знает, сколько впереди, и может его пропустить. Когда вставляешь шаг в <ol>, все номера после него обновляются сами, а набранные вручную пришлось бы перенумеровывать.

Настройки нумерованных списков

У <ol> есть несколько атрибутов. start="4" начинает счёт с 4; это удобно, когда список продолжается после абзаца. reversed считает вниз, для десятки лучших. type меняет маркер на буквы или римские цифры: type="a", type="A", type="i" или type="I". Отдельный пункт тоже может перескочить на номер через value, как в <li value="10">. Как выглядят маркеры и номера (их форма, цвет и видны ли они вообще), решает CSS.

Списки внутри списков

Пункт списка может содержать целый список. Помести внутренний <ul> или <ol> внутрь того <li>, к которому он относится, после текста пункта и перед его закрывающим тегом. Частая ошибка: поставить внутренний список между двумя <li>, прямо во внешний список, а так нельзя. Вложенными списками сайты строят меню с подменю, а планы показывают подпункты.

<ul>
  <li>Bread
    <ul>
      <li>Sourdough</li>
      <li>Rye</li>
    </ul>
  </li>
  <li>Cakes</li>
</ul>

Списки описаний

Третий вид списка связывает термины с описаниями, как глоссарий или набор вопросов и ответов. <dl> является списком описаний, <dt> хранит термин, а <dd> его описание. У одного термина может быть несколько описаний, а несколько терминов могут делить одно. По умолчанию браузеры показывают описания с отступом.

Списки встречаются там, где их не ждёшь. Меню наверху большинства сайтов является <ul> из ссылок внутри <nav>; CSS выстраивает пункты в ряд и прячет маркеры. Ряд карточек товаров или результаты поиска часто тоже списки. Когда видишь группу похожих вещей, спроси себя, не список ли это. Обычно ответ «да».

Быстрый способ выбрать между ними: мысленно перемешай пункты. Если от этого меняется смысл, как у шагов рецепта или десятки лучших, список нумерованный и ему нужен <ol>. Если ничего не меняется, как у списка вещей в дорогу, используй <ul>. Делай пункты короткими и начинай их одинаково по грамматике, чтобы список легко было пробежать глазами.