Списки в HTML: ul, ol, dl и современное оформление CSS

HTML предлагает несколько элементов для структурированных перечней: <ul> для списка без значимого порядка, <ol> для последовательности и <dl> для пар «термин — описание». Правильный выбор важен не только для внешнего вида: структура списка передаёт смысл браузеру и вспомогательным технологиям.

В старых уроках оформление маркеров часто задавалось атрибутами HTML. Сегодня смысл лучше оставлять в разметке, а форму маркера, отступы и декоративные детали переносить в CSS.

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

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

Наглядный пример. Три вида списков ниже являются настоящей HTML-разметкой, а не изображением. Так проще сразу увидеть, чем отличаются ul, ol и dl.

Ниже каждый из этих вариантов разобран отдельно и приведён в виде кода, который можно скопировать.

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

Если пункты можно переставить местами без потери логики, чаще всего подходит именно <ul>. Вид маркера при необходимости меняют через CSS, а устаревший атрибут type у ul использовать не стоит.

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

<ol> нужен, когда последовательность важна: инструкция, рейтинг, этапы процесса, нумерованные требования.

<ol>
  <li>Создать файл.</li>
  <li>Добавить разметку.</li>
  <li>Открыть страницу в браузере.</li>
</ol>

У ol есть полезные атрибуты start и reversed. Первый задаёт начальное число, второй включает обратный отсчёт. Атрибут type допустим, когда вид нумерации имеет смысл в самом документе, но для чисто декоративной смены цифр на буквы предпочтительнее CSS.

Список описаний dl, dt и dd

<dl> предназначен для групп терминов и описаний. Это хороший вариант для словаря, метаданных, характеристик или короткого FAQ, где каждая сущность связана со своим пояснением.

<dl>
  <dt>HTML</dt>
  <dd>Язык разметки веб-страниц.</dd>

  <dt>CSS</dt>
  <dd>Язык описания внешнего вида документа.</dd>
</dl>

Не стоит подменять dl обычным ul, если между терминами и описаниями есть явная смысловая связь. И наоборот, список товаров или преимуществ не становится списком описаний только потому, что у пунктов есть по одному предложению текста.

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

Один список можно вложить внутрь элемента li другого списка. Это подходит для древовидной структуры, меню разделов или многоуровневого плана.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

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

Как изменить маркеры и нумерацию через CSS

Для оформления используют list-style-type, list-style-position, list-style-image и псевдоэлемент ::marker. Простые варианты выглядят так:

.square-list {
  list-style-type: square;
}

.roman-list {
  list-style-type: upper-roman;
}

.article-list li::marker {
  font-weight: 700;
}

Для декоративных задач CSS удобнее старых HTML-атрибутов: оформление можно изменить во всём сайте одной правкой stylesheet, не затрагивая структуру документов.

Когда нужны start, reversed и value.

Иногда нумерация несёт содержательный смысл. Например, статья продолжает предыдущий список с пункта 4 или показывает обратный рейтинг. Тогда HTML-атрибуты уместны.

<ol start="4">
  <li>Четвёртый шаг</li>
  <li>Пятый шаг</li>
</ol>

<ol reversed>
  <li>Третье место</li>
  <li>Второе место</li>
  <li>Первое место</li>
</ol>

У отдельного li можно задать value, если счёт должен перескочить на конкретное значение. Использовать такие возможности только ради необычного дизайна нет смысла — для оформления есть CSS.

Типичные ошибки при работе со списками.

Семантика списка обычно важнее его внешнего вида. Перед публикацией полезно проверить следующие моменты:

• пункты списка действительно являются однородным перечнем;
• для последовательности используется ol, а не ul с цифрами вручную;
• дочерний список находится внутри li;
• оформление маркеров не задаётся устаревшими атрибутами ul;
• текст не разбит на список только ради визуальных галочек;
• после длинного списка есть абзац, который продолжает или подводит итог мысли.

Хорошо оформленный список ускоряет чтение, но десять списков подряд превращают статью в конспект. Там, где мысль требует объяснения, лучше оставить полноценный абзац.

Итог

ul, ol и dl решают разные задачи. Сначала выбирайте элемент по смыслу, затем оформляйте его CSS. Такой подход даёт предсказуемую структуру, лучше масштабируется и не привязывает содержание к устаревшим презентационным атрибутам HTML.