Списки

HTML предоставляет три типа списков: маркированный (<ul>), нумерованный (<ol>) и список определений (<dl>).

Зачем нужно

Списки структурируют информацию: навигационные меню, перечни товаров, шаги инструкций, глоссарии. Screen readers объявляют количество пунктов и текущую позицию, что важно для доступности.

Где используется

  • Навигационные меню (<nav> + <ul>)
  • Перечисления в тексте
  • Пошаговые инструкции
  • FAQ, глоссарии (dl/dt/dd)
  • Хлебные крошки (<nav> + <ol>)

Предпосылки

Маркированный список <ul>

Порядок элементов не важен:

<ul>
  <li>Молоко</li>
  <li>Хлеб</li>
  <li>Яйца</li>
</ul>

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

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Навигационное меню

<nav aria-label="Основная навигация">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/catalog">Каталог</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/contacts">Контакты</a></li>
  </ul>
</nav>

Нумерованный список <ol>

Порядок элементов важен:

<ol>
  <li>Установить Node.js</li>
  <li>Создать проект: <code>npm init -y</code></li>
  <li>Установить зависимости: <code>npm install</code></li>
  <li>Запустить: <code>npm start</code></li>
</ol>

Атрибуты <ol>

<!-- Начать с другого числа -->
<ol start="5">
  <li>Пятый шаг</li>  <!-- 5. -->
  <li>Шестой шаг</li>  <!-- 6. -->
</ol>

<!-- Обратный порядок -->
<ol reversed>
  <li>Третье место</li>  <!-- 3. -->
  <li>Второе место</li>  <!-- 2. -->
  <li>Первое место</li>  <!-- 1. -->
</ol>

<!-- Тип нумерации -->
<ol type="a">  <!-- a, b, c... -->
  <li>Пункт a</li>
  <li>Пункт b</li>
</ol>

<ol type="I">  <!-- I, II, III... -->
  <li>Глава I</li>
  <li>Глава II</li>
</ol>

<!-- Изменить номер конкретного пункта -->
<ol>
  <li>Первый</li>
  <li value="10">Десятый (перескок)</li>
  <li>Одиннадцатый</li>  <!-- 11 -->
</ol>
Значение type Результат
1 (default) 1, 2, 3...
a a, b, c...
A A, B, C...
i i, ii, iii...
I I, II, III...

Хлебные крошки (ordered list)

<nav aria-label="Хлебные крошки">
  <ol class="breadcrumbs">
    <li><a href="/">Главная</a></li>
    <li><a href="/catalog">Каталог</a></li>
    <li><a href="/catalog/electronics">Электроника</a></li>
    <li aria-current="page">Смартфоны</li>
  </ol>
</nav>

<style>
  .breadcrumbs {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 0.5rem;
  }
  .breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin-left: 0.5rem;
  }
</style>

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

Пары "термин -- определение":

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language -- язык гипертекстовой разметки.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets -- каскадные таблицы стилей.</dd>

  <dt>JavaScript</dt>
  <dd>Язык программирования для веба.</dd>
  <dd>Также используется на сервере (Node.js).</dd>
</dl>

Несколько определений для одного термина

<dl>
  <dt>Промис (Promise)</dt>
  <dd>Объект, представляющий результат асинхронной операции.</dd>
  <dd>Может быть в состоянии pending, fulfilled или rejected.</dd>
</dl>

Несколько терминов для одного определения

<dl>
  <dt>ECMAScript</dt>
  <dt>ES</dt>
  <dd>Стандарт, на котором основан JavaScript.</dd>
</dl>

FAQ на <dl>

<section>
  <h2>Часто задаваемые вопросы</h2>
  <dl>
    <dt>Сколько стоит доставка?</dt>
    <dd>Бесплатно при заказе от 3000 рублей.</dd>

    <dt>Какие способы оплаты?</dt>
    <dd>Банковской картой, электронными деньгами, наличными при получении.</dd>

    <dt>Можно ли вернуть товар?</dt>
    <dd>Да, в течение 14 дней с момента покупки.</dd>
  </dl>
</section>

Метаданные на <dl>

<article>
  <h2>Статья</h2>
  <dl class="meta">
    <dt>Автор</dt>
    <dd>Иван Петров</dd>

    <dt>Дата</dt>
    <dd><time datetime="2026-04-06">6 апреля 2026</time></dd>

    <dt>Категория</dt>
    <dd>Веб-разработка</dd>

    <dt>Теги</dt>
    <dd>HTML</dd>
    <dd>Семантика</dd>
  </dl>
</article>

Группировка в <dl> с помощью <div>

В HTML5 можно оборачивать пары dt/dd в <div> для стилизации:

<dl>
  <div>
    <dt>Имя</dt>
    <dd>Иван</dd>
  </div>
  <div>
    <dt>Должность</dt>
    <dd>Frontend-разработчик</dd>
  </div>
</dl>

<style>
  dl div {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
  }
  dt { font-weight: 700; min-width: 120px; }
</style>

Стилизация списков через CSS

<style>
  /* Убрать маркеры */
  .no-bullets {
    list-style: none;
    padding: 0;
  }

  /* Свои маркеры */
  .custom-markers li {
    list-style-type: '→ ';
  }

  /* Маркеры через ::marker */
  .colored-markers li::marker {
    color: tomato;
    font-weight: bold;
  }

  /* Горизонтальный список */
  .horizontal {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 1rem;
  }
</style>

<ul class="no-bullets">
  <li>Без маркеров</li>
  <li>Чистый текст</li>
</ul>

<ul class="custom-markers">
  <li>Со стрелкой</li>
  <li>Со стрелкой</li>
</ul>

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

Ошибка Почему плохо Как правильно
<li> вне <ul> или <ol> Невалидно <li> только внутри <ul>, <ol>, <menu>
Текст напрямую в <ul> Невалидно Только <li> как прямые потомки
<ol> для неупорядоченного списка Нарушена семантика <ol> только когда порядок важен
<br> вместо <li> Нет семантики списка Используй <ul> / <ol>
Меню без <ul> Screen readers не распознают как список <nav> + <ul> + <li>
Вложенный список вне <li> Невалидно Вложенный <ul>/<ol> внутри <li>

Практика

  1. Создай маркированный список покупок и нумерованный список шагов рецепта
  2. Сделай вложенный список (два уровня)
  3. Создай глоссарий на <dl> с 5+ терминами
  4. Создай навигацию <nav> + <ul> и хлебные крошки <nav> + <ol>
  5. Используй reversed и start на <ol> -- проверь нумерацию

Связанные темы

Ресурсы