Исполняемые доки HTML: Списки в HTML

Q: Как сделать маркированный список в HTML?

Используйте неупорядоченный список: и по одному на каждый пункт, например Milk Eggs . Браузер рисует маркер перед каждым пунктом и делает отступ у списка.

Q: Как убрать маркеры у списка в HTML?

Задайте в CSS list-style: none. Также задайте padding-inline-start: 0 (или padding: 0), чтобы убрать отступ, который браузер добавляет под маркеры.

Q: Как начать нумерованный список с другого числа?

Используйте атрибут start: дает первому пункту номер 5. reversed считает в обратную сторону, а value у задает номер этого пункта и следующих за ним.

Q: Как сделать вложенный список в HTML?

Поместите внутренний или внутрь внешнего списка, после текста этого пункта. Список, стоящий прямо внутри другого между элементами , некорректен.

Списки HTML: ul, ol и li

В HTML два основных вида списков. <ul> (unordered list, неупорядоченный список) показывает маркеры, а <ol> (ordered list, упорядоченный список) показывает номера. Каждый пункт это <li> (list item, элемент списка).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

Используйте <ol>, когда порядок что-то значит (шаги, рейтинги, оглавление), и <ul>, когда не значит. Программы чтения с экрана объявляют оба как списки с количеством пунктов, например «список, 3 элемента», поэтому настоящий список лучше строк, которые начинаются с набранных вручную «•» или «1.».

Непосредственно внутри списка могут быть только элементы <li>. Все остальное, включая заголовки, абзацы и другие списки, помещается внутрь <li>.

Стили маркеров

list-style-type у <ul> меняет маркер. Псевдоэлемент ::marker оформляет сам маркер или номер отдельно от текста:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

Строковое значение использует этот текст как маркер. "\2713 " это галочка и один пробел: первый пробел только завершает экранирование \2713. ::marker принимает лишь несколько свойств, в основном color, font-size и другие свойства шрифта, и этого хватает для частой просьбы о «цветных маркерах» без лишней разметки.

Нумерованные списки: цифры, буквы и римские числа

У <ol> есть атрибуты для нумерации:

Атрибут	Пример	Результат
`type`	`type="a"`	a, b, c (также работают `A`, `i`, `I` и `1`)
`start`	`start="5"`	Счет начинается с 5
`reversed`	`reversed`	Счет в обратную сторону
`value` (у `<li>`)	`<li value="10">`	Этот пункт получает номер 10, следующие продолжают от него

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

type уместен в HTML, потому что буквы могут нести смысл («выберите вариант B»). Для чисто визуальных изменений то же самое делает CSS list-style-type: upper-alpha или lower-roman.

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

Обратите внимание, где стоит </li>: пункт «Frontend» закрывается только после своего подсписка. Если закрыть его перед <ul>, подсписок окажется прямо внутри внешнего <ul>, а это некорректно, хотя выглядит почти так же.

Нумерованные списки вкладываются так же, и в каждом подсписке нумерация начинается с 1. Для номеров вроде 1.1 и 1.2 нужны счетчики CSS.

Списки определений: dl, dt и dd

Список определений связывает термины с их описаниями: глоссарий, детали заказа, пары вроде вопросов и ответов. <dt> это термин, а <dd> описание:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

У термина может быть несколько <dd>, а несколько <dt> могут разделять один <dd>. Браузеры по умолчанию делают отступ у <dd>; правило margin выше его убирает. Для данных с несколькими столбцами лучше подходит таблица.

Списки без маркеров: меню и горизонтальные списки

Навигационные меню это списки ссылок. Уберите маркеры через list-style: none и отступ через padding: 0, а затем выстройте пункты в ряд через flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

Для программ чтения с экрана список остается списком («навигация, список, 3 элемента»). Одно исключение: Safari с VoiceOver может терять смысл списка, когда маркеры убраны. Если количество пунктов важно вашим пользователям, добавьте <ul> атрибут role="list".

Отступы по умолчанию

Браузеры дают спискам внешние отступы 1em сверху и снизу и сдвигают их через padding-inline-start: 40px, и именно там стоят маркеры. Отступ находится со стороны начала, поэтому в языках с письмом справа налево маркеры и отступ автоматически переходят на другую сторону. Если убрать отступ, маркеры окажутся за пределами блока списка, где их может обрезать; либо оставьте часть отступа, либо используйте list-style-position: inside.

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

<li> без родительского списка. Он должен стоять внутри <ul>, <ol> или <menu>.
Вложенный список вне своего <li>. Поместите подсписок внутрь пункта, к которому он относится.
Текст или другие теги прямо внутри <ul>, например <ul><p>Note</p><li>...</li></ul>. Перенесите их в <li> или за пределы списка.
Маркеры или номера, набранные вручную через • и <br>. Программы чтения с экрана слышат абзац, а не список.
list-style: none без padding: 0, из-за чего остается загадочный отступ в 40 пикселей.
<ol> ради внешнего вида. Если порядок не важен, используйте <ul> и оформите его.

Часто задаваемые вопросы

Как сделать маркированный список в HTML?

Используйте неупорядоченный список: <ul> и по одному <li> на каждый пункт, например <ul><li>Milk</li><li>Eggs</li></ul>. Браузер рисует маркер перед каждым пунктом и делает отступ у списка.

Чем ul отличается от ol?

<ul> это неупорядоченный список с маркерами, для пунктов, порядок которых не важен. <ol> это упорядоченный список с номерами, для шагов и рейтингов, где порядок важен. Оба содержат пункты <li>.

Как убрать маркеры у списка в HTML?

Задайте <ul> в CSS list-style: none. Также задайте padding-inline-start: 0 (или padding: 0), чтобы убрать отступ, который браузер добавляет под маркеры.

Как начать нумерованный список с другого числа?

Используйте атрибут start: <ol start="5"> дает первому пункту номер 5. reversed считает в обратную сторону, а value у <li> задает номер этого пункта и следующих за ним.

Как сделать вложенный список в HTML?

Поместите внутренний <ul> или <ol> внутрь <li> внешнего списка, после текста этого пункта. Список, стоящий прямо внутри другого <ul> между элементами <li>, некорректен.

Связанные концепции

Списки в HTML: маркированные, нумерованные и вложенные