Создание списков в HTML: от базового синтаксиса до стилизации

Иван Корнев·27.04.2026·⏱3 мин

Чтобы создать список на веб-странице, используйте тег <ul> для маркированного (неупорядоченного) списка или <ol> для нумерованного (упорядоченного). Каждый элемент списка обязательно оборачивается в тег <li>. Это стандартный способ структурирования данных, который улучшает читаемость контента и помогает поисковым системам лучше понимать структуру страницы.

Разница между маркированным и нумерованным списком

Выбор типа списка зависит от смысла данных, которые вы выводите:

Маркированный список (<ul>) используется, когда порядок элементов не важен. Примеры: список покупок, перечень характеристик товара, меню навигации.
Нумерованный список (<ol>) применяется, если последовательность имеет значение. Примеры: пошаговая инструкция, рейтинг топ-10, этапы регистрации.

Правильный выбор тега влияет на доступность (a11y). Скринридеры озвучивают нумерованные списки как «список из N пунктов», что помогает пользователям с нарушениями зрения ориентироваться в длинных инструкциях.

Базовый синтаксис и примеры кода

Маркированный список (Unordered List)

Для создания списка с точками (буллитами) используется комбинация тегов <ul> и <li>.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Результат в браузере:

HTML
CSS
JavaScript

Нумерованный список (Ordered List)

Для списка с цифрами используется тег <ol>. Браузер автоматически проставляет номера по порядку.

<ol>
  <li>Откройте редактор кода</li>
  <li>Создайте файл index.html</li>
  <li>Напишите базовую структуру</li>
</ol>

Результат в браузере:

Откройте редактор кода
Создайте файл index.html
Напишите базовую структуру

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

Списки можно вкладывать друг в друга для создания иерархии. Вложенный список размещается внутри тега <li> родительского элемента.

<ul>
  <li>Фрукты
    <ul>
      <li>Яблоки</li>
      <li>Бананы</li>
    </ul>
  </li>
  <li>Овощи
    <ul>
      <li>Морковь</li>
      <li>Огурцы</li>
    </ul>
  </li>
</ul>

Следите за отступами в коде. Неправильная вложенность тегов (например, закрытие <li> перед открытием вложенного <ul>) может привести к ошибкам отображения в старых браузерах или проблемам с доступностью.

Стилизация списков с помощью CSS

По умолчанию браузеры добавляют отступы (padding или margin) и стандартные маркеры. Вы можете изменить их вид через CSS.

Удаление маркеров

Часто используется в меню навигации, где точки или цифры не нужны.

ul.no-bullets {
  list-style-type: none; /* Убирает маркеры */
  padding: 0;            /* Убирает внутренний отступ */
}

Изменение вида маркеров

Вы можете заменить стандартную точку на квадрат, круг или римские цифры.

/* Квадраты вместо точек */
ul.square-list {
  list-style-type: square;
}

/* Римские цифры для нумерованного списка */
ol.roman-list {
  list-style-type: upper-roman;
}

Использование своих изображений

Если дизайн требует уникальных иконок, используйте свойство list-style-image.

ul.custom-icons {
  list-style-image: url('icon-check.svg');
}

Для более гибкой кастомизации маркеров (например, изменение цвета маркера отдельно от текста) современные разработчики часто используют псевдоэлементы ::before вместе с list-style-type: none.

Сравнение основных атрибутов и свойств

Характеристика	`<ul>` (Маркированный)	`<ol>` (Нумерованный)
Основной тег	`<ul>`	`<ol>`
Элемент списка	`<li>`	`<li>`
Значение порядка	Не важно	Важно
Атрибут start	Не поддерживается	Задает начало нумерации (например, `start="5"`)
Атрибут reversed	Не поддерживается	Реверсирует нумерацию (5, 4, 3...)
CSS свойство типа	`disc`, `circle`, `square`, `none`	`decimal`, `lower-alpha`, `upper-roman` и др.

Частые ошибки при верстке списков

Использование списков для отступов. Никогда не создавайте пустые списки или списки с неразрывными пробелами ( ) просто чтобы сделать отступ. Для этого используйте CSS (margin, padding).
Разрыв структуры. Тег <li> должен быть прямым потомком <ul> или <ol>. Размещение других тегов (например,
) напрямую внутри
- ` является невалидным HTML.
- Заблуждение про <br>. Не используйте <br> внутри <li> для создания новых пунктов. Каждый новый пункт должен быть обернут в свой тег <li>.

FAQ

Можно ли начать нумерованный список с цифры, отличной от 1? Да, используйте атрибут start в теге <ol>. Например, <ol start="10"> начнет список с цифры 10.

Как сделать горизонтальный список? Сам по себе HTML-тег не делает список горизонтальным. Это делается через CSS. Обычно родительскому <ul> задают display: flex, а элементам <li> — необходимые отступы.

Влияют ли списки на SEO? Да. Поисковые системы любят структурированный контент. Использование списков помогает алгоритмам выделять ключевые пункты, шаги или характеристики, что может улучшить сниппет сайта в выдаче.