Списки в HTML: ul, ol, dl — практическое руководство для начинающих

Списки в HTML — один из самых часто используемых инструментов в вёрстке. Они помогают структурировать контент, улучшить читаемость и даже влияют на SEO. В этой статье мы разберём ul, ol и dl: что это, когда и как применять, как писать доступную разметку и аккуратно стилизовать маркеры.

1. Какие бывают списки и зачем они нужны

В HTML есть три вида списков:

2. Базовая разметка ul и ol

<h3>Неупорядоченный (ul)</h3>
<ul>
  <li>Быстрый старт</li>
  <li>Понятные примеры</li>
  <li>Полезные советы</li>
</ul>

<h3>Упорядоченный (ol)</h3>
<ol>
  <li>Подготовьте материалы</li>
  <li>Сверстайте прототип</li>
  <li>Проверьте доступность</li>
</ol>

Важно: прямыми дочерними элементами ul и ol могут быть только li. Любые вложенные списки помещайте внутрь li.

3. Атрибуты для ol: start, reversed, type, value

У ol есть удобные атрибуты для управления нумерацией:

<ol start="5" type="I">
  <li>Пятый пункт (I=5)</li>
  <li value="10">Десятый пункт (перескок)</li>
  <li>Одиннадцатый пункт</li>
</ol>

<ol reversed>
  <li>Шаг 3</li>
  <li>Шаг 2</li>
  <li>Шаг 1</li>
</ol>

4. Вложенные списки: как делать правильно

Вложенный список всегда идёт внутри элемента li родительского списка — это важно для корректной семантики и доступности:

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

5. Список определений dl: не только словари

dl состоит из пар dt (термин) и dd (описание). Допустимы несколько dt к одному dd и наоборот — это удобно для синонимов или нескольких характеристик.

<dl>
  <dt>Кэш</dt>
  <dd>Временное хранилище для ускорения доступа к данным.</dd>

  <dt>CPU</dt>
  <dt>Процессор</dt>
  <dd>Основной вычислительный блок компьютера.</dd>
</dl>

<!-- Пары «ключ–значение», например характеристики товара -->
<dl class="specs">
  <dt>Экран</dt>
  <dd>6.5" OLED, 120 Гц</dd>
  <dt>Память</dt>
  <dd>8 ГБ RAM, 256 ГБ ROM</dd>
</dl>

6. Списки и навигация: правильная семантика меню

Навигацию удобно размечать как список ссылок внутри nav. Для активного пункта применяйте aria-current="page" на ссылку.

<nav aria-label="Основная навигация">
  <ul class="menu">
    <li><a href="/" aria-current="page">Главная</a></li>
    <li><a href="/blog">Блог</a></li>
    <li><a href="/contacts">Контакты</a></li>
  </ul>
</nav>

7. Стилизация маркеров: list-style и ::marker

Для простых случаев достаточно list-style-type:

.features { list-style-type: square; }
.steps { list-style-type: decimal-leading-zero; }
.roman { list-style-type: lower-roman; }

Современный способ — псевдоэлемент ::marker (широко поддерживается). Можно менять цвет, шрифт и даже задавать контент-символ:

.checklist li::marker {
  color: #2e7d32;
  content: "✔ ";
  font-weight: 700;
}

<ul class="checklist">
  <li>Семантичная разметка</li>
  <li>Доступные подписи</li>
  <li>Оптимальные маркеры</li>
</ul>

Если нужен полный кастом, можно убрать стандартные маркеры и нарисовать свои, но не забывайте про выравнивание и доступность:

.custom {
  list-style: none;
  margin: 0;
  padding: 0;
}
.custom li {
  position: relative;
  padding-left: 1.5rem;
}
.custom li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: .6rem; height: .6rem;
  background: #1976d2;
  border-radius: 50%;
}

8. Нумерация «с огоньком»: CSS‑счётчики

CSS‑счётчики позволяют строить сложную нумерацию (например, «1.2.3»). Это уже ближе к CSS, но пригодится для документации и ToC.

.toc { counter-reset: h1; }
.toc > li { counter-increment: h1; }
.toc > li::marker { content: counters(h1, ".") ". "; }
.toc ol { counter-reset: h2; }
.toc ol > li { counter-increment: h2; }
.toc ol > li::marker { content: counters(h1, ".") "." counters(h2, ".") ". "; }

<ol class="toc">
  <li>Введение
    <ol>
      <li>Цели</li>
      <li>Термины</li>
    </ol>
  </li>
  <li>Основы
    <ol>
      <li>Разметка</li>
      <li>Стилизация</li>
    </ol>
  </li>
</ol>

9. Доступность (A11y): что важно учесть

<!-- Антипаттерн (нельзя так) -->
<div class="bad-list">- Пункт 1<br>- Пункт 2</div>

<!-- Если очень нужно -->
<div role="list">
  <div role="listitem">Пункт 1</div>
  <div role="listitem">Пункт 2</div>
</div>

10. SEO и контент: когда ul, а когда ol

11. Типичные ошибки и как их избежать

12. Мини‑шпаргалка по спискам в HTML

Хотите быстро закрепить тему на практике и собрать красивые, адаптивные списки и меню? Посмотрите программу курса и примеры макетов: Прокачать вёрстку на курсе «Вёрстка сайта с нуля 2.0».

Заключение

Списки в HTML (ul, ol, dl) — фундамент, на котором держится структура контента. Выбирайте правильный тип списка, поддерживайте доступность, аккуратно настраивайте маркеры и нумерацию. Эти простые правила делают интерфейс понятнее и людям, и поисковикам — а верстальщику экономят время и нервы.

Источник