Списки HTML: упорядоченные, неупорядоченные и списки описаний

В HTML существует три типа списков: неупорядоченные, упорядоченные и списки описаний. Каждый из них создаётся с помощью разных тегов. Рассмотрим их подробнее.

Неупорядоченные списки HTML

Неупорядоченные списки используются для группировки элементов, не имеющих числового порядка. При изменении порядка пунктов смысл списка не меняется. Для создания неупорядоченного списка используется тег <ul>. Этот тег является парным: содержимое записывается между открывающим тегом <ul> и закрывающим тегом </ul>.

Каждый элемент неупорядоченного списка объявляется внутри тега <li>.

Пример тега HTML `<ul>` для создания неупорядоченного списка:

Пример неупорядоченного списка|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>An unordered list:</h1>
    <ul>
      <li>This is a list item</li>
      <li>This is another list item</li>
      <li>This is one more list item</li>
    </ul>
  </body>
</html>

Попробуйте сами »

По умолчанию элементы неупорядоченного списка отмечаются маркерами (маленькими чёрными кружками). Старый атрибут type (type="circle", type="square") позволял изменить стиль маркера, однако он устарел в HTML5. Вместо него используйте CSS-свойство list-style-type — это современный и поддерживаемый способ управления маркерами как для неупорядоченных, так и для упорядоченных списков. Полная таблица замены устаревших значений type на CSS приведена в разделе про упорядоченные списки ниже.

Пример тега HTML `<ul>` для создания неупорядоченного списка с маркерами:

Пример атрибута type для списков HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <ul type="circle">
      <li>List item </li>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <ul type="square">
      <li>List item</li>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </body>
</html>

Попробуйте сами »

Результат

Для указания типа маркера элемента списка можно также использовать CSS-свойства list-style-type или list-style-image.

Пример тега HTML `<ul>` с CSS-свойством list-style-type для создания неупорядоченного списка:

Пример свойства list-style-type

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Examples of unordered lists:</h2>
    <ul style="list-style-type: square;">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
    <ul style="list-style-type: disc;">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ul>
    <ul style="list-style-type: circle;">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Ice Tea</li>
    </ul>
  </body>
</html>

Попробуйте сами »

Упорядоченные списки HTML

Упорядоченный список HTML используется для перечисления элементов, отмеченных числами. Он начинается с тега <ol>. Этот тег является парным: содержимое записывается между открывающим тегом <ol> и закрывающим тегом </ol>.

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

Пример тега HTML `<ol>` для создания упорядоченного списка:

Пример упорядоченного списка HTML|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>An ordered list:</h1>
    <ol>
      <li>This is List item number 1</li>
      <li>This is List item number 2</li>
      <li>This is List item number 3</li>
    </ol>
  </body>
</html>

Попробуйте сами »

По умолчанию элементы упорядоченного списка нумеруются числами. Для нумерации буквами или римскими цифрами раньше добавляли атрибут type="a" или type="I" к тегу <ol>. Этот атрибут type по-прежнему поддерживается браузерами, однако устарел в HTML5, поэтому в новом коде предпочтительнее использовать CSS-свойство list-style-type.

Замена устаревшего атрибута `type` на CSS

Каждое старое значение атрибута type напрямую соответствует значению CSS list-style-type:

Устаревший атрибут	Эквивалент CSS	Пример вывода
`type="1"`	`list-style-type: decimal;`	1, 2, 3
`type="A"`	`list-style-type: upper-alpha;`	A, B, C
`type="a"`	`list-style-type: lower-alpha;`	a, b, c
`type="I"`	`list-style-type: upper-roman;`	I, II, III
`type="i"`	`list-style-type: lower-roman;`	i, ii, iii

В первом примере ниже используется устаревший атрибут type, чтобы вы могли увидеть все стили маркеров сразу; в рабочем коде вместо него следует указывать соответствующее значение list-style-type из таблицы.

Пример тега HTML `<ol>` для создания упорядоченного списка с буквами и римскими цифрами:

Пример различных маркеров элементов списка

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h3>A numbered list:</h3>
    <ol>
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>An alphabetized list:</h3>
    <ol type="A">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>An alphabetized list (lowercase letters):</h3>
    <ol type="a">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>A numbered list (Roman numerals):</h3>
    <ol type="I">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
    <h3>A numbered list (lowercase Roman numerals):</h3>
    <ol type="i">
      <li>Peach</li>
      <li>Apricot</li>
      <li>Banana</li>
      <li>Strawberry</li>
    </ol>
  </body>
</html>

Попробуйте сами »

Списки описаний HTML

Списки описаний HTML используются для сопоставления терминов с их определениями — по аналогии со словарём или глоссарием.

Для создания списка описаний используется тег <dl>. Этот тег является парным.

Внутри <dl> теги <dt> используются для термина/названия в списке описаний, а <dd> — для описания этого термина/названия.

Пример тега HTML `<dl>` для создания списка описаний:

Пример списка описаний|W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Description Lists:</h1>
    <dl>
      <dt>Tea</dt>
      <dd>hot drink</dd>
      <dt>Juice</dt>
      <dd>cold drink</dd>
    </dl>
  </body>
</html>

Попробуйте сами »

Результат

Когда использовать `<dl>` вместо `<ul>` из пар

Используйте список описаний, когда ваши данные представляют собой набор пар имя/значение (термин/определение): записи глоссария, метаданные в формате ключ-значение (автор, дата публикации, категория), пары вопрос/ответ в FAQ или диалоги. Элемент <dl> делает эту связь явной в разметке, что могут передавать вспомогательные технологии.

Если ваши элементы представляют собой просто плоскую последовательность без структуры пар, подойдёт обычный <ul>. Не имитируйте пары ключ/значение с помощью чередующихся элементов <li> внутри <ul> — это нарушает семантическую связь между термином и его описанием.

За одним <dt> может следовать несколько элементов <dd> (один термин, несколько описаний), а несколько элементов <dt> могут совместно использовать один <dd> (несколько терминов с одинаковым определением). Оба варианта допустимы:

<dl>
  <dt>Coffee</dt>
  <dt>Espresso</dt>
  <dd>A hot caffeinated drink.</dd>

  <dt>Water</dt>
  <dd>A drink with no calories.</dd>
  <dd>Also used for cooking and cleaning.</dd>
</dl>

Типичная ошибка: тег <dl> раньше злоупотреблялся исключительно ради стандартного отступа. Никогда не используйте его только для визуального отступа — для этого применяйте CSS-свойства margin/padding. Используйте <dl> только тогда, когда содержимое действительно представляет собой данные в формате термин/описание. Подробнее см. на отдельных страницах <dl>, <dt> и <dd>.

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

Вложенный список содержит список внутри другого списка.

Пример вложенного списка HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>A nested HTML list</h2>
    <p>A nested list contains a list inside a list.</p>
    <ul>
      <li>Copybooks</li>
      <li>
        Books
        <ul>
          <li>Detective books</li>
          <li>Roman books</li>
          <li>Fairy tale books</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

Попробуйте сами »

Вложенный список необходимо размещать внутри элемента <li>, а не непосредственно между родительскими элементами <li> — <ul>/<ol> не может быть прямым дочерним элементом другого <ul>/<ol>.

Можно смешивать типы списков: упорядоченный список может быть вложен в неупорядоченный, и наоборот. Браузеры автоматически делают отступ для каждого вложенного уровня (за счёт стандартного левого padding у <ul>/<ol>), что обеспечивает наглядность иерархии.

Пример смешанного вложенного списка (упорядоченный список внутри неупорядоченного):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Shopping list</h2>
    <ul>
      <li>Fruit</li>
      <li>
        Drinks, in order of preference:
        <ol>
          <li>Coffee</li>
          <li>Tea</li>
          <li>Water</li>
        </ol>
      </li>
      <li>Bread</li>
    </ul>
  </body>
</html>

Управление нумерацией списка

По умолчанию упорядоченный список нумерует элементы начиная с 1. Три атрибута позволяют изменить это поведение:

start (у <ol>) — число, с которого начинается нумерация.
reversed (у <ol>) — нумерация по убыванию вместо возрастания.
value (у конкретного <li>) — задаёт номер этого элемента вручную; последующие элементы продолжают нумерацию от него.

Использование `start` для продолжения списка между разделами

Атрибут start наиболее полезен, когда единый логический список разбит заголовками, изображениями или абзацами. Например, если первый раздел заканчивается на шаге 39, то шаги второго раздела продолжаются с <ol start="40">, и нумерация остаётся корректной после разрыва.

Пример списка HTML с нумерацией, начинающейся с заданного числа:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>List counting control</h2>
    <p>Continuing a procedure whose first section ended at step 39.</p>
    <ol start="40">
      <li>Pen</li>
      <li>Pencil</li>
      <li>Copybook</li>
    </ol>
    <ol type="I" start="40">
      <li>Pen</li>
      <li>Pencil</li>
      <li>Copybook</li>
    </ol>
  </body>
</html>

Попробуйте сами »

Пример использования `reversed` и `value`:

Атрибут reversed нумерует список от большего к меньшему — удобно для обратного отсчёта или рейтингов «Топ N», отображаемых от худшего к лучшему. Атрибут value у конкретного <li> перескакивает счётчик на указанное число, а следующие элементы продолжают нумерацию от него.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>A reversed list (countdown)</h2>
    <ol reversed>
      <li>Bronze medal</li>
      <li>Silver medal</li>
      <li>Gold medal</li>
    </ol>

    <h2>Setting an item's number with value</h2>
    <ol>
      <li>First</li>
      <li value="5">Jumps to 5</li>
      <li>Continues at 6</li>
    </ol>
  </body>
</html>

Приведённый выше список с обратным порядком отображается как 3. Bronze medal, 2. Silver medal, 1. Gold medal. Во втором списке второй элемент принудительно получает номер 5, поэтому третий элемент отображается с номером 6.

Доступность списков HTML

Списки несут смысловую нагрузку для вспомогательных технологий, а не только для визуального оформления. Когда программа чтения с экрана встречает <ul>, <ol> или <dl>, она объявляет роль списка и обычно количество элементов (например, «список, 3 элемента»), а затем объявляет позицию каждого элемента. Этот контекст помогает пользователям, которые не видят маркеры или числа, понять структуру, поэтому выбор правильного типа списка является также решением в области доступности.

Несколько практических рекомендаций:

Удаление маркеров может лишить список его семантики. В Safari с VoiceOver применение list-style: none (распространённое для навигационных меню и списков с нестандартным оформлением) может привести к тому, что браузер утратит неявную роль списка, и список больше не будет объявляться как список. Чтобы сохранить семантику, добавьте явный атрибут role="list":

<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Оборачивайте навигационные списки в <nav>. Меню сайта традиционно представляет собой список ссылок внутри элемента <nav>. Тег <nav> создаёт навигационный ориентир, к которому могут переходить пользователи программ чтения с экрана, а внутренний <ul> держит элементы сгруппированными и подсчитанными.

<nav aria-label="Main">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Используйте <ol>, когда порядок важен (шаги, рейтинги, инструкции), и <ul>, когда он не важен — программы чтения с экрана объявляют позиции в упорядоченном списке, так что это различие передаётся пользователям, а не только отображается визуально.

Горизонтальный список с CSS

Списки HTML можно стилизовать самыми разными способами с помощью CSS.

Вы можете оформлять списки HTML с использованием различных CSS-свойств. Например, можно создать навигационное меню, задав list-style-type: none для удаления маркеров и display: flex для размещения элементов в ряд.

Цвета в примере ниже указаны в виде буквальных шестнадцатеричных значений, чтобы пример был самодостаточным; в реальном проекте обычно следует использовать переменные цветов из вашей дизайн-системы (CSS-переменные), а не жёстко прописанные hex-коды.

Пример горизонтального списка с CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
        background-color: #F44336;
      }
      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }
      li a:hover {
        background-color: #981816;
      }
    </style>
  </head>
  <body>
    <h2>Navigation Menu Example</h2>
    <p>
      You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
    </p>
    <ul>
      <li>
        <a href="#home">Home</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/tool/">Tools</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/snippets">Snippets</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/quiz/">Quizzes</a>
      </li>
      <li>
        <a href="https://www.w3docs.com/string-functions/">String Functions</a>
      </li>
    </ul>
  </body>
</html>

Попробуйте сами »

Практика

Какие типы списков HTML упоминаются в статье? (Выберите все подходящие варианты.)

Упорядоченный списокНеупорядоченный списокСписок описанийМаркированный списокНумерованный список

Практика

Вы размечаете шаги рецепта, где порядок имеет значение. Какой тип списка следует использовать?

Упорядоченный список, поскольку порядок элементов важен и программы чтения с экрана объявляют номер каждого шагаНеупорядоченный список, поскольку порядок элементов никогда не имеет значенияСписок описаний, поскольку каждый шаг соотносит термин с определениемНе имеет значения, какой тип использовать

Практика

Вы задали list-style: none для навигационного меню. Что нужно добавить, чтобы VoiceOver по-прежнему объявлял его как список?

Добавить role='list' к элементу ulДобавить type='none' к элементу ulЗаменить ul набором элементов divНичего не нужно; удаление маркеров никогда не влияет на семантику

Неупорядоченные списки HTML

Пример тега HTML <ul> для создания неупорядоченного списка:

Пример тега HTML <ul> для создания неупорядоченного списка с маркерами:

Результат

Пример тега HTML <ul> с CSS-свойством list-style-type для создания неупорядоченного списка:

Упорядоченные списки HTML

Пример тега HTML <ol> для создания упорядоченного списка:

Замена устаревшего атрибута type на CSS

Пример тега HTML <ol> для создания упорядоченного списка с буквами и римскими цифрами:

Списки описаний HTML

Пример тега HTML <dl> для создания списка описаний:

Результат

Когда использовать <dl> вместо <ul> из пар

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

Пример вложенного списка HTML:

Пример смешанного вложенного списка (упорядоченный список внутри неупорядоченного):

Управление нумерацией списка

Использование start для продолжения списка между разделами

Пример списка HTML с нумерацией, начинающейся с заданного числа:

Пример использования reversed и value:

Доступность списков HTML

Горизонтальный список с CSS

Пример горизонтального списка с CSS:

Практика

Пример тега HTML `<ul>` для создания неупорядоченного списка:

Пример тега HTML `<ul>` для создания неупорядоченного списка с маркерами:

Пример тега HTML `<ul>` с CSS-свойством list-style-type для создания неупорядоченного списка:

Пример тега HTML `<ol>` для создания упорядоченного списка:

Замена устаревшего атрибута `type` на CSS

Пример тега HTML `<ol>` для создания упорядоченного списка с буквами и римскими цифрами:

Пример тега HTML `<dl>` для создания списка описаний:

Когда использовать `<dl>` вместо `<ul>` из пар

Использование `start` для продолжения списка между разделами

Пример использования `reversed` и `value`: