Списки

Списки упорядочивают перечисления: покупки, шаги рецепта, пункты меню сайта. В HTML три вида списков — маркированный, нумерованный и список определений. Каждый пункт списка — отдельный элемент.

Маркированный список

Тег <ul> (unordered list — неупорядоченный список) создаёт список, а каждый пункт заворачивают в <li> (list item — пункт списка):

<ul>
  <li>Молоко</li>
  <li>Хлеб</li>
  <li>Сыр</li>
</ul>

Браузер поставил перед каждым пунктом точку-маркер и сдвинул список вправо.

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

Если порядок важен, используйте <ol> (ordered list — упорядоченный список). Номера браузер расставит сам:

<ol>
  <li>Вскипятите воду</li>
  <li>Засыпьте чай</li>
  <li>Подождите три минуты</li>
</ol>

Добавьте пункт в середину — нумерация пересчитается, править номера вручную не нужно.

Настройка нумерации

<ol start="3">
  <li>Третье место</li>
  <li>Четвёртое место</li>
</ol>
<ol reversed>
  <li>Три</li>
  <li>Два</li>
  <li>Один</li>
</ol>

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

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

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

У вложенного списка браузер меняет вид маркера — на кружок.

Список определений

<dl> (description list) хранит пары «термин — пояснение»: словарь, характеристики товара, вопросы и ответы. <dt> — термин, <dd> — его описание:

<dl>
  <dt>Эспрессо</dt>
  <dd>Крепкий кофе, приготовленный под давлением.</dd>
  <dt>Латте</dt>
  <dd>Эспрессо с большим количеством молока.</dd>
</dl>

Списки в навигации

Меню сайта — это тоже список ссылок. Обычно его делают через <ul>, а маркеры и отступы убирают в CSS:

<ul style="list-style: none; padding: 0;">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Меню</a></li>
  <li><a href="#">Контакты</a></li>
</ul>

Так программа чтения с экрана сообщит: «список, три пункта» — и человек сразу поймёт размер меню.

Частая ошибка

Внутри <ul> и <ol> могут лежать только пункты <li>. Текст или заголовок прямо в списке — ошибка, хотя браузер и покажет что-то похожее на правду:

<!-- Неправильно -->
<ul>
  Покупки
  <li>Молоко</li>
</ul>
 
<!-- Правильно -->
<p>Покупки:</p>
<ul>
  <li>Молоко</li>
</ul>