Списки в HTML и CSS: разбор для новичка

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

Что нужно до начала

• Любой текстовый редактор — Notepad++, VS Code или даже «Блокнот».
• Браузер — Chrome, Firefox, Edge, любой из последних версий.
• Один файл с расширением .html, который вы откроете двойным кликом. Никакого сервера и сборщиков для этой темы не требуется.

Создайте файл index.html и вставьте туда минимальный каркас — дальше весь код добавляем внутрь тега <body>.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Списки</title>
</head>
<body>

  <!-- сюда добавляем списки -->

</body>
</html>

Шаг 1. Маркированный список

Маркированный список — это тег <ul> (unordered list, «неупорядоченный»), внутри которого лежат пункты <li> (list item). Каждый пункт браузер по умолчанию рисует с точкой-маркером слева.

<ul>
  <li>Молоко</li>
  <li>Хлеб</li>
  <li>Кофе</li>
</ul>

Проверка: сохраните файл, откройте в браузере — увидите три строки, каждая с чёрной точкой слева. Если точек нет или пункты идут в одну строку, вы забыли закрыть </li> или перепутали теги.

Шаг 2. Нумерованный список

Всё то же самое, но обёртка — <ol> (ordered list, «упорядоченный»). Браузер сам расставит числа 1, 2, 3 — вручную нумеровать не нужно.

<ol>
  <li>Открыть кран</li>
  <li>Набрать воду</li>
  <li>Закрыть кран</li>
</ol>

Если нужно начать не с единицы, добавьте атрибут start. А чтобы поменять тип нумерации на буквы или римские цифры — атрибут type.

<ol start="5" type="A">
  <li>Пятый пункт станет буквой E</li>
  <li>Дальше F, G и так далее</li>
</ol>

Проверка: при type="A" пункты пойдут буквами A, B, C; при type="1" — обычными цифрами; при type="I" — римскими. Значение start считается всегда числом, даже если тип буквенный.

Когда какой список брать

Правило простое и не про внешний вид, а про смысл. Если поменять пункты местами и смысл не изменился — это <ul>. Если порядок важен (шаги рецепта, места в рейтинге) — <ol>. Внешне их всё равно можно сделать одинаковыми через CSS, а вот программы для незрячих и поисковики ориентируются именно на тег.

Шаг 3. Вложенный список

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

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

Проверка: «Яблоки» и «Груши» должны быть с отступом вправо относительно «Фрукты», а маркер у них по умолчанию станет пустым кружком. Если вложенный список оказался на одном уровне с «Овощи», значит закрывающий </li> у «Фрукты» стоит слишком рано.

Шаг 4. Убираем маркеры через CSS

Меню сайта, «хлебные крошки», список тегов — почти всегда это <ul> без видимых точек. Убирает точки свойство list-style: none. Одновременно сбрасываем отступ и внутренний паддинг, которые браузер добавляет спискам сам.

<style>
  .menu {
    list-style: none;   /* убираем маркеры */
    margin: 0;          /* убираем внешний отступ */
    padding: 0;         /* убираем внутренний отступ слева */
  }
</style>

<ul class="menu">
  <li>Главная</li>
  <li>О нас</li>
  <li>Контакты</li>
</ul>

Проверка: точки исчезли, список прижался к левому краю. Если слева остался пустой отступ — вы сбросили margin, но забыли padding (или наоборот): у списков «съедает» место именно padding-left, у него по умолчанию около 40 пикселей.

Горизонтальное меню в строку

Чтобы пункты выстроились в ряд, а не столбиком, самый предсказуемый способ в актуальных браузерах — display: flex на самом <ul>. Свойство gap задаёт расстояние между пунктами.

<style>
  .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;   /* пункты в строку */
    gap: 20px;       /* расстояние между ними */
  }
</style>

Проверка: три пункта встанут в одну строку с промежутком в 20 пикселей. Старый способ через float или display: inline-block тоже работает, но с flex не нужно бороться с обтеканием и лишними пробелами между элементами.

Список без точек — это всё ещё список. Не превращайте меню в набор <div> только потому, что «точки некрасивые»: точки убираются одной строкой CSS, а семантику <ul> потом не вернуть.

Свой маркер вместо точки

Значение list-style-type принимает не только none. Можно поставить квадрат, кружок или даже свой символ.

Задать нестандартный символ (например, галочку или тире) удобнее через ::marker — это отдельная тема, здесь достаточно готовых значений из таблицы.

Если не получилось

• Пункты идут сплошным текстом без переносов. Скорее всего пропущены закрывающие </li> или сами теги <li>. Каждый пункт — отдельная пара <li>…</li>.
• Точки не убираются, хотя вы написали list-style: none. Проверьте, что класс в CSS (.menu) совпадает с классом в HTML (class="menu") — до буквы. И что тег <style> лежит в <head> или до списка.
• Слева остаётся пустое место. Добавьте padding: 0 к списку — браузер отводит место под маркеры даже когда их нет.
• Вложенный список выпал на верхний уровень. Он должен стоять внутри <li>, до его закрывающего тега, а не между двумя <li>.
• Нумерация в <ol> начинается заново с единицы после вложенного списка. Это нормально: у каждого <ol> своя нумерация. Единый сквозной счёт делается через CSS-счётчики — отдельная тема.

Что дальше

Когда базовые списки собираются на автомате, посмотрите в сторону трёх вещей: псевдоэлемент ::marker для кастомных маркеров, свойство list-style-position (маркер внутри или снаружи блока текста) и тег <dl> с парами <dt>/<dd> для списков «термин — определение». Последний часто забывают, а он идеален для FAQ и характеристик товара.