Списки

Учимся оформлять перечисления — от списка покупок до пошаговой инструкции.

Список состоит из контейнера (<ul> или <ol>) и пунктов <li> внутри него.

Маркированный список — <ul>

<ul> (unordered list) — список, где порядок не важен. Каждый пункт — это <li> (list item). Браузер рисует кружки-маркеры:

<ul>
  <li>Хлеб</li>
  <li>Молоко</li>
  <li>Яблоки</li>
</ul>

Нумерованный список — <ol>

<ol> (ordered list) — когда порядок важен: шаги инструкции, рейтинг, рецепт. Браузер сам проставляет номера, так что нумеровать вручную не нужно:

<ol>
  <li>Включите компьютер</li>
  <li>Откройте браузер</li>
  <li>Введите адрес сайта</li>
</ol>

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

Вложенные списки

Список можно положить внутрь пункта другого списка — получится подсписок. Важно: вложенный <ul> кладут внутрь <li>, а не между пунктами:

<ul>
  <li>Фрукты
    <ul>
      <li>Яблоки</li>
      <li>Груши</li>
    </ul>
  </li>
  <li>Овощи</li>
</ul>

Список определений — <dl>

Реже, но полезно: <dl> (description list) — список «термин — определение», как в словаре. Внутри пары: <dt> — термин, <dd> — его описание:

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки веб-страниц.</dd>
  <dt>CSS</dt>
  <dd>Язык оформления страниц.</dd>
</dl>

Какой список выбрать

Список	Когда использовать
`<ul>`	порядок не важен (список покупок, теги)
`<ol>`	порядок важен (шаги, рейтинг)
`<dl>`	пары «термин — определение» (словарь, FAQ)

Списки повсюду, даже там, где их не видно

Списки — один из самых частых элементов на сайтах, причём нередко они спрятаны за оформлением. Горизонтальное меню навигации в шапке сайта — это почти всегда обычный <ul>, которому через CSS убрали маркеры и выстроили пункты в строку. Хлебные крошки («Главная → Каталог → Товар»), список тегов под статьёй, галерея карточек — под капотом это списки.

Почему так? Потому что семантически это именно перечисление однотипных элементов, и тег <ul> честно об этом сообщает — браузеру, поисковику и программе чтения с экрана, которая объявит пользователю «список из 5 пунктов». Поэтому, увидев на странице любое перечисление, по умолчанию думайте о списке, а не о наборе отдельных абзацев.

Что можно класть внутрь пункта

Важно понимать: пункт <li> — это не только строчка текста. Внутрь него можно положить почти что угодно: несколько абзацев, ссылку, картинку, вложенный список. Это делает списки гибким инструментом. Например, пункт меню — это <li>, внутри которого лежит ссылка <a>:

<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="/about">О нас</a></li>
  <li><a href="/contacts">Контакты</a></li>
</ul>

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

Итог

<ul> — маркированный, <ol> — нумерованный; пункты в обоих — <li>.
Списки вкладывают друг в друга, помещая вложенный список внутрь <li>.
<dl> с парами <dt>/<dd> подходит для «термин — определение».