Списки в HTML: маркированные и нумерованные

Списки — один из базовых инструментов вёрстки. Они помогают структурировать информацию: пункты меню, шаги инструкции, перечень товаров, требования к задаче и т. д. В HTML есть два основных типа списков: маркированный и нумерованный. Разберём, как их делать правильно, где не ошибиться и как стилизовать с помощью CSS.

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

Маркированный список используют, когда пункты равнозначны и их последовательность не имеет значения. Например: «ингредиенты для салата», «список покупок», «набор функций».

Для создания маркированного списка используют теги <ul> (unordered list — неупорядоченный список) и <li> (list item — элемент списка).

Пример

<ul>
  <li>Помидоры</li>
  <li>Огурцы</li>
  <li>Зелень</li>
  <li>Лук</li>
</ul>

• Помидоры
• Огурцы
• Зелень
• Лук

Что здесь происходит:

• <ul> — контейнер списка. Он говорит браузеру: «это маркированный список».
• Каждый пункт оборачивается в <li>. Это обязательный тег для каждого отдельного элемента.
• Браузер автоматически ставит маркер (точку) перед каждым <li>.

Частые ошибки

• Забыли <li>. Если написать <ul><p>Пункт</p></ul>, это будет невалидно. Внутри <ul> должны быть только <li>.
• Лишние вложенности. Не стоит оборачивать <li> в <div> или <p> без необходимости. Это усложняет CSS и может сломать стандартные отступы.
• Пустые <li>. Пустой элемент <li></li> — технически допустим, но почти всегда означает ошибку логики.

Нумерованный список: важен порядок

Нумерованный список нужен, когда важна последовательность: шаги инструкции, этапы процесса, пункты регламента.

Для него используют теги <ol> (ordered list — упорядоченный список) и те же <li> для пунктов.

Пример

<ol>
  <li>Нарезать помидоры</li>
  <li>Нарезать огурцы</li>
  <li>Добавить зелень</li>
  <li>Посолить и перемешать</li>
</ol>

Браузер сам проставит цифры: 1, 2, 3, 4.

1. Нарезать помидоры
2. Нарезать огурцы
3. Добавить зелень
4. Посолить и перемешать

Важные нюансы

• Атрибут start. Можно задать начальное значение нумерации:
  html

  <ol start="5">
    <li>Пятый шаг</li>
    <li>Шестой шаг</li>
  </ol>

  Получится нумерация 5, 6, …

• Атрибут type (устаревший, но понятный). Раньше использовали type="A" или type="i", чтобы получить буквы или римские цифры. Сейчас это лучше делать через CSS, потому что type считается устаревшим.

Вложенные списки: как не запутаться

Иногда нужно сделать подпункты. Например, в инструкции: «Шаг 1: подготовить овощи», а под ним — отдельные действия.

В HTML вложенность делается просто: внутрь <li> кладём ещё один список (<ul> или <ol>).

Пример: нумерованный список с маркированными подпунктами

<ol>
  <li>Подготовить овощи
    <ul>
      <li>Помыть помидоры</li>
      <li>Почистить лук</li>
    </ul>
  </li>
  <li>Нарезать овощи</li>
  <li>Смешать и заправить</li>
</ol>

1. Подготовить овощи
   • Помыть помидоры
   • Почистить лук
2. Нарезать овощи
3. Смешать и заправить

Здесь:

• Основной список — нумерованный (<ol>).
• Внутри первого пункта — маркированный список (<ul>), который описывает подшаги.

Правило: вложенный список должен находиться строго внутри <li>, а не после него.

Как поменять вид маркеров и нумерации через CSS

HTML задаёт структуру, а внешний вид — это задача CSS.

Маркированные списки: разные маркеры

ul.circle {
  list-style-type: circle;
}
 
ul.square {
  list-style-type: square;
}
 
ul.none {
  list-style-type: none;
}

Пример HTML:

<ul class="circle">
  <li>Круглый маркер</li>
  <li>Ещё один</li>
</ul>
 
<ul class="square">
  <li>Квадратный маркер</li>
  <li>И ещё</li>
</ul>
 
<ul class="none">
  <li>Без маркера</li>
  <li>Только текст</li>
</ul>

Нумерованные списки: буквы, римские цифры

ol.alpha {
  list-style-type: lower-alpha; /* a, b, c */
}
 
ol.roman {
  list-style-type: upper-roman; /* I, II, III */
}

Когда лучше использовать список, а когда — нет

• Используйте список, если у вас есть набор однородных элементов, которые удобно воспринимать списком.
• Не используйте список, если пункты сильно различаются по смыслу или содержат много текста. В таких случаях лучше сделать блоки <div> с заголовками и описаниями.
• Для таблиц данных (цены, характеристики) лучше использовать <table> или сетку (grid), а не списки.

Практический пример: страница с инструкциями и перечнем ингредиентов

Допустим, мы делаем страницу рецепта.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Рецепт салата</title>
    <style>
      .ingredients {
        list-style-type: disc;
      }
      .steps {
        list-style-type: decimal;
      }
      .sub-steps {
        margin-top: 0.5em;
        list-style-type: circle;
      }
    </style>
  </head>
  <body>
    <h1>Салат из свежих овощей</h1>
 
    <h2>Ингредиенты</h2>
    <ul class="ingredients">
      <li>Помидоры — 2 шт.</li>
      <li>Огурцы — 2 шт.</li>
      <li>Зелень — 1 пучок</li>
      <li>Лук — 1 шт.</li>
      <li>Соль — по вкусу</li>
    </ul>
 
    <h2>Приготовление</h2>
    <ol class="steps">
      <li>Подготовить овощи
        <ul class="sub-steps">
          <li>Тщательно помыть все овощи.</li>
          <li>Очистить лук и нарезать тонкими полукольцами.</li>
        </ul>
      </li>
      <li>Нарезать помидоры и огурцы крупными кубиками.</li>
      <li>Смешать все ингредиенты в салатнике.</li>
      <li>Посолить по вкусу и аккуратно перемешать.</li>
    </ol>
  </body>
</html>

В этом примере:

• Ингредиенты — маркированный список: порядок не важен.
• Приготовление — нумерованный список: важна последовательность шагов.
• Подшаги подготовки овощей — вложенный маркированный список.
• Стили вынесены в <style> для наглядности (в реальном проекте лучше вынести в отдельный CSS-файл).