Списки

Два вида списков

Список — самая частая структура на странице после абзаца. Меню, состав, шаги инструкции, характеристики товара — всё это списки.

Видов два. Маркированный — когда порядок не важен:

<ul>
  <li>Полив</li>
  <li>Свет</li>
  <li>Пересадка</li>
</ul>

Нумерованный — когда важен:

<ol>
  <li>Достать растение из горшка</li>
  <li>Стряхнуть старую землю</li>
  <li>Посадить в новый горшок</li>
</ol>

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

Точки и цифры рисует браузер сам. Писать их в тексте не надо — иначе получится «1. 1. Достать растение».

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

Пункт списка может содержать свой список. Так делают меню с подпунктами и оглавления.

<ul>
  <li>Полив
    <ul>
      <li>Летом</li>
      <li>Зимой</li>
    </ul>
  </li>
  <li>Свет</li>
</ul>

Главное здесь — куда положить вложенный список. Он идёт внутрь <li>, к которому относится, а не между пунктами.

Ошибка выглядит так: закрыли </li>, поставили <ul>, потом следующий <li>. Браузер это переживёт, но получится список, у которого посередине болтается второй список ничей — и отступы поедут.

Вкладывать можно сколько угодно уровней и смешивать виды: нумерованный внутри маркированного и наоборот. Браузер поменяет маркер на втором уровне — с точки на кружок, на третьем — на квадрат.

Зачем вообще нужна вложенность, если можно просто сделать два списка подряд? Затем, что вложенность — это отношение. Два списка подряд говорят «вот перечень и вот ещё перечень». Вложенный говорит «вот перечень, и у второго пункта есть свои части». Разницу видит поиск, слышит программа чтения с экрана и использует любое выпадающее меню.

Отсюда и практическое следствие: если вы не можете объяснить, к какому именно пункту относятся подпункты, — вложенность вам не нужна, и честнее сделать два отдельных списка с заголовками.

Что кладут в пункт

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

<ul>
  <li><strong>Полив.</strong> Раз в неделю летом.</li>
  <li><strong>Свет.</strong> Рассеянный, не прямое солнце.</li>
</ul>

Так делают списки характеристик и «что входит в набор»: слово-метка, потом объяснение.

Если пункт длинный, внутри ставят абзацы:

<li>
  <p>Пересадка нужна раз в два года.</p>
  <p>Горшок берут на два сантиметра шире прежнего.</p>
</li>

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

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

Третий вид списка встречается реже, но там, где он нужен, ему нет замены. Это список определений: пары «что» и «что это значит».

<dl>
  <dt>Фикус</dt>
  <dd>Не любит, когда его переставляют.</dd>

  <dt>Кактус</dt>
  <dd>Зимой почти не нуждается в воде.</dd>
</dl>

Три тега: <dl> — весь список, <dt> — термин, <dd> — его описание. Браузер отодвинет описание вправо.

У одного термина может быть несколько описаний, и у одного описания — несколько терминов. Это и отличает такой список от обычного: там пункты равноправны, здесь между ними есть отношение.

<dl>
  <dt>Вес</dt><dd>2,4 кг</dd>
  <dt>Высота</dt><dd>40 см</dd>
</dl>

Где это пригодится: характеристики товара, глоссарий, «вопрос — ответ», подписи к полям в карточке.