Списки в HTML

Меню ингредиентов, утренние ритуалы, маркеры функций и чеклисты сборов удобнее сканировать как списки. HTML даёт две повседневные структуры: неупорядоченные и упорядоченные списки. После предостережения о plug-in (история, без примеров кода) эта сессия возвращает к разметке, которую вы будете снова и снова использовать почти на каждой странице контента. Считайте списки смыслом групп и последовательностей — не ярлыком для многоколоночного layout.

Для чего нужны списки

Список помечает группу связанных пунктов как группу. Браузеры и вспомогательные технологии могут объявить, сколько пунктов есть, и переходить по ним по одному. Эта структура помогает беглому просмотру, конспектам и рецептам. Смысл исчезает, если вы имитируете маркеры случайными тире в абзацах или растягиваете ul только чтобы втолкнуть текст в визуальные колонки. Выбирайте разметку списка, когда контент действительно набор или последовательность. Декоративные отступы и grid оставьте для CSS позже.

Прямой ответ

• ul — неупорядоченный список (маркеры по умолчанию в браузере)
• ol — упорядоченный список (номера по умолчанию)
• li — каждый пункт списка
  Вкладывайте другой ul или ol внутрь li, когда нужны подпункты. Не оставляйте li вне родительского списка. Закрывающие теги должны вкладываться в обратном порядке открытия, особенно когда под одним шагом добавляете подсписок.

Когда какой список

Выбирайте элемент, который совпадает с идеей, которую пишете, а не с видом, который надеетесь получить от CSS позже. Маркеры и номера — оформление по умолчанию; решение HTML — входит ли порядок в смысл.

Неупорядоченный список

Список покупок с маркерами — классическое демо ul. Каждый пункт — li. Начните здесь, когда пункты равноправны — названия фруктов, метки хобби или highlight функций, которые можно переставить без поломки урока.

Читаем неупорядоченный пример

• ul открывает контейнер неупорядоченного списка
• Каждый li — один пункт этой группы
• Закрывающие теги должны вкладываться правильно: завершите каждый li до закрытия ul
• Маркеры по умолчанию — стиль браузера; позже CSS может сменить значки, но смысл HTML остаётся «неупорядоченное множество»
• Пустые li и пропущенные закрытия — частые опечатки; смотрите страницу рано, чтобы поймать их

Упорядоченный список со вложенным подсписком

Нумерованным шагам часто нужна небольшая группа маркеров под одним шагом — файлы для создания, инструменты для открытия или ингредиенты только этого шага. Поместите внутренний список внутрь li этого шага, а не как соседа рядом со всем ol. Внешние номера остаются читаемыми, а внутренние маркеры проясняют детали.

Читаем вложенный пример

• Внешний ol нумерует основные шаги по порядку
• Второй li содержит вводный текст плюс дочерний ul
• Внутренние li принадлежат вложенному ul; этот ul закрывается до закрытия родительского li
• Третий шаг продолжает внешнюю упорядоченную последовательность после конца вложенного блока
• Шаблон масштабируется к более глубокой вложенности, но держите деревья новичков мелкими, чтобы порядок открытия/закрытия был очевиден
• Если номера выглядят «неправильно», проверьте, не закрыли ли li слишком рано и не вытолкнули ли вложенный список наружу

Сначала смысл, потом стиль

Браузеры рисуют маркеры и номера без дополнительного CSS. Это удобство соблазняет злоупотреблять списками как машинами отступов или фейковыми боковыми панелями. Сопротивляйтесь здесь. Если контент — набор или последовательность, разметка списка — правильный семантический выбор даже до переоформления маркеров. Если нужны карточки рядом, сетка nav или колонки журнала, подождите уроков CSS и структурного layout — не гните ul в каркас страницы только потому, что меню иногда позже используют списки с аккуратной стилизацией.

Доступность и привычки сканирования

Списки помогают беглому просмотру и помогают вспомогательным технологиям объявлять фразы вроде «список из трёх пунктов». Держите каждый li по возможности на одной идее. Не набивайте огромные несвязанные абзацы в каждый пункт, если контенту правда не нужна такая глубина. Вкладывайте только при реальной иерархии — фейковая вложенность ради отступа путает и людей, и инструменты. Короткий заголовок над списком часто проясняет тему группы до первого маркера.

Практика в редакторе

1. Сделайте ul из трёх хобби (или трёх блюд — держите пункты короткими).
2. Сделайте ol из трёх утренних шагов в том порядке, в каком вы их реально делаете.
3. Вложите маленький ul под один из этих li (например, файлы для открытия или инструменты под рукой).
4. Проверьте мысленно: каждый li внутри ul или ol; вложенные списки внутри li.
5. Поменяйте тип одного списка (ul ↔ ol) и спросите, всё ли ещё смысл подходит к контенту.
6. Откройте страницу в браузере и убедитесь, что маркеры/номера появляются без написания CSS.
7. Один раз специально сломайте вложенность, заметьте, как криво выглядит outline, затем почините закрытия.

Лёгкие ошибки

• Писать li вне любого ul/ol (осиротевшие пункты)
• Использовать списки только для отступа случайных абзацев или фейковых колонок
• Забывать закрывать вложенные списки в правильном порядке
• Ставить вложенный ul соседом li, а не внутрь одного li
• Выбирать ol для пунктов без последовательности (или ul для строгих номеров шагов) не думая о смысле
• Копировать разметку списка из tutorial только про layout, где ul — сетка меню без семантики сначала
• Оставлять внешний список незакрытым после длинного вложенного блока

Итог

• ul + li для неупорядоченных множеств (маркеры по умолчанию)
• ol + li для упорядоченных последовательностей (номера по умолчанию)
• Вкладывайте подсписок внутрь li, не рядом с родительским списком
• Выбирайте тип списка, совпадающий со смыслом
• Не используйте списки как замену колонкам layout в CSS
• После исторической заметки о plug-in списки возвращают вас к повседневному структурному HTML, который вы продолжите использовать