Тег ol (от английского ordered list, «упорядоченный список») записывает нумерованный список: перечень, в котором порядок пунктов важен. Это парный тег: закрывающий </ol> обязателен. Пункты записывают в li, а номера браузер считает и рисует слева. Начало, направление и вид нумерации задают атрибуты type, start, reversed и value (последний у li), а оформление номеров берёт на себя CSS.
Урок «Списки: ul, ol и вложенные списки» учит записывать список и выбирать между ol и ul. Здесь разберём другое: что браузер делает с нулём, минусом и буквами в нумерации, как продолжить список после абзаца и как получить номера вида 1.1.
<ol>
<li>Нагрейте воду</li>
<li>Засыпьте чай</li>
<li>Залейте водой</li>
</ol>В этой статье
- Тег ol в HTML: что это и когда нужен нумерованный список
- Атрибут type у тега ol: цифры, буквы и римские цифры
- Атрибут start у тега ol: с какого номера начать список
- Атрибут reversed у тега ol: обратная нумерация
- Атрибут value у li в теге ol: изменить номер пункта
- Вложенный ol: нумерация подпунктов и вид 1.1, 1.2
- Что считается пунктом в теге ol: скрытые li, display и div
- Стили тега ol: list-style-type, ::marker и свой вид номера
- Как продолжить нумерацию ol после абзаца или картинки
- Тег ol внутри p: почему браузер разрывает абзац
- Свойства ol в JavaScript: start, reversed, type и value у li
- Атрибуты тега ol: таблица type, start, reversed, value и compact
- Вопросы про тег ol: длинные номера и копирование списка
- Частые ошибки с тегом ol
Тег ol в HTML: что это и когда нужен нумерованный список
Тег ol блочный: он занимает всю ширину строки и начинается с новой. Внутри записывают пункты li, а номера в разметке не пишут: браузер считает их при выводе. Поэтому пункт можно добавить в середину или убрать, и все следующие номера пересчитаются сами. Если порядок пунктов не важен, нужен тег ul. Проверка простая: поменяйте два пункта местами, и если смысл нарушился, это ol.
По умолчанию у ol отступ слева 40 пикселей, сверху и снизу по 16. Номер находится в отступе, вне блока пункта, и выводится с точкой и пробелом: 1. Ширину под номер оставляет отступ, поэтому длинные номера из нескольких цифр в него могут не поместиться.
<ol>
<li>Нагрейте воду</li>
<li>Засыпьте чай</li>
<li>Залейте водой</li>
</ol>Пример: добавить и убрать пункт
Добавляйте и убирайте пункты: номера в коде не записаны, а на экране пересчитываются.
Атрибут type у тега ol: цифры, буквы и римские цифры
Атрибут type задаёт вид номеров: 1 (цифры, по умолчанию), a и A (строчные и прописные латинские буквы), i и I (римские цифры). Регистр значения важен: type="a" и type="A" дают разные буквы. Неизвестное значение браузер игнорирует и выводит цифры. Правило CSS list-style-type сильнее атрибута, поэтому в оформлении сайта его применяют чаще.
У ol атрибут type не устарел: стандарт оставляет его для случаев, когда вид номера несёт смысл, например в юридическом тексте со ссылками вида «пункт б».
<ol type="a">
<li>Чай</li>
<li>Кофе</li>
</ol>Пример: значения type и правило CSS
Выберите значение: под кодом видно, какие номера выбрал браузер. Последняя запись показывает победу CSS.
Атрибут start у тега ol: с какого номера начать список
Атрибут start задаёт число, с которого начинается список. Записывают его всегда цифрами, даже если type выводит буквы: start="3" при type="a" даёт букву c. Допустимы ноль и отрицательные числа. У дробного значения браузер отбрасывает дробную часть (2.7 превращается в 2), а значение не из цифр, например abc, игнорирует: список начнётся с единицы.
Для букв и римских цифр есть оговорка: у них нет нуля и отрицательных номеров. Пока число не больше нуля, браузер выводит обычные цифры, а буквы начинаются только с единицы. Включите type="a" и сдвигайте ползунок.
<ol start="5">
<li>Чай</li>
<li>Кофе</li>
</ol>Пример: start с нулём, минусом и буквами
Двигайте ползунок и включайте type=a: под списком записаны номера, которые вывел браузер.
Атрибут reversed у тега ol: обратная нумерация
Булев атрибут reversed включает обратную нумерацию: номера убывают сверху вниз. Если start не записан, браузер берёт за начало число пунктов: в списке из четырёх пунктов получится 4, 3, 2, 1. Обратный счёт удобен для рейтинга «топ-10», где лучшее место показывают последним.
На единице счёт не останавливается: start="2" при четырёх пунктах даёт 2, 1, 0 и -1. Пункт со своим value задаёт новую точку, и счёт вниз продолжается от неё. Число пунктов считают по прямым li самого списка, а пункты вложенных списков в него не входят.
<ol reversed>
<li>Чай</li>
<li>Кофе</li>
<li>Какао</li>
</ol>Пример: reversed со start и value
Выберите запись: вверху её код, под списком названы номера, которые получились.
Атрибут value у li в теге ol: изменить номер пункта
Атрибут value записывают не у ol, а у отдельного li: он задаёт номер этого пункта, а следующие пункты продолжают счёт от него. Это нужно, когда часть пунктов пропущена или номер задан извне, например в документе со ссылкой на «пункт 7». Записывают целое число: у дробного браузер отбрасывает дробную часть, а нецифровое значение игнорирует. С reversed счёт идёт вниз от записанного числа.
Ручные номера хрупкие: после добавления пункта в начало списка числа в value приходится править по всему списку.
<ol>
<li>Чай</li>
<li value="7">Кофе</li>
<li>Какао</li>
</ol>Пример: свой номер у пункта
Выберите запись: под списком названы номера, которые вывел браузер.
Вложенный ol: нумерация подпунктов и вид 1.1, 1.2
Вложенный ol записывают внутри пункта, после его текста, и закрывают до закрывающего </li>. Нумерация вложенного списка отдельная и всегда начинается с единицы: она не продолжает номера внешнего. Чтобы уровни не путались, вложенным спискам задают другой type: цифры, затем буквы, затем римские цифры.
Номера вида «1.1, 1.2» атрибутами не получить, их делает только CSS-счётчик: у ol счётчик сбрасывают, у li увеличивают, а функция counters() склеивает номера всех уровней в одну строку.
<ol>
<li>Заварка
<ol>
<li>Чай</li>
<li>Вода</li>
</ol>
</li>
<li>Подача</li>
</ol>Пример: нумерация вложенных списков
Переключайте записи: вверху код, под ним результат. В третьей записи нумерацию делает CSS.
Что считается пунктом в теге ol: скрытые li, display и div
Нумеруются только настоящие пункты: прямые потомки ol с display: list-item. Пункт с display: none номера не получает и в счёте не участвует, поэтому после него номера не прыгают. Если же задать пункту display: block, номер у него пропадёт, а соседи продолжат счёт без него.
Запись, которую браузер выводит верно, не всегда допустима. li внутри div получает номер, а текст прямо внутри ol выводится без номера, но валидатор считает ошибкой и то и другое.
li:nth-child(2) {
display: none;
}Пример: что нумеруется, а что нет
Выберите запись: под результатом написано, получил ли каждый пункт номер.
Стили тега ol: list-style-type, ::marker и свой вид номера
Вид номеров меняет list-style-type, и он сильнее атрибута type. Кроме цифр и латинских букв доступны decimal-leading-zero (01, 02, 03), lower-greek, armenian и другие значения. Значения cyrillic и lower-russian в CSS записать можно, но Chrome их не выводит и показывает обычные цифры. Русские буквы получают собственным набором через @counter-style.
Цвет и жирность номера задаёт псевдоэлемент ::marker, собственную строку вместо номера записывают в кавычках, а list-style: none убирает номера совсем. Отступ слева настраивает padding-left, а положение номера list-style-position.
ol {
list-style-type: decimal-leading-zero;
}
li::marker {
color: #FF6B6B;
}Пример: вид, цвет и свой набор номеров
Выберите значение list-style-type и включайте цвет: рядом с кодом всегда видны правила, которые получились.
Как продолжить нумерацию ol после абзаца или картинки
Абзац или картинка прямо между пунктами ol не допускаются, а если закрыть список, второй ol начнёт с единицы. Решений два. Первое: записать у второго списка start с нужным числом, но тогда после добавления пункта в первый список число придётся менять вручную. Второе надёжнее: оставить один список, а абзац или картинку записать внутри пункта, после его текста.
<ol>
<li>Нагрейте воду</li>
<li>Засыпьте чай
<p>Совет: вода не кипяток.</p>
</li>
<li>Залейте водой</li>
</ol>Пример: продолжение нумерации после абзаца
Выберите запись: под результатом названы номера обоих списков.
Тег ol внутри p: почему браузер разрывает абзац
Тег p закрывается сам, как только браузер встречает ol: список прямо внутри p не допускается. Слова после списка оказываются вне абзаца, а в конце появляется пустой абзац. Если нужна фраза со списком посередине, записывают три блока: абзац, список и ещё один абзац. Те же правила действуют и для тега ul.
<p>Сделайте так:</p>
<ol>
<li>нагрейте</li>
<li>залейте</li>
</ol>
<p>и подождите.</p>Пример: ol внутри p и между абзацами
Красные пунктирные рамки — абзацы. В первой записи слова про ожидание оказались вне абзаца.
Свойства ol в JavaScript: start, reversed, type и value у li
У элемента ol в DOM есть свойства start, reversed и type, а у li свойство value. Запись в них меняет атрибуты в разметке, и браузер сразу пересчитывает номера. Читать свойства тоже можно, но с одной оговоркой: li.value возвращает записанное число, а у пункта без value вернёт 0, а не номер, который виден на экране.
const ol = document.querySelector('ol');
ol.start = 5;
ol.reversed = true;
ol.type = 'a';
ol.children[1].value = 9;Пример: управление нумерацией из JavaScript
Включайте свойства: вверху выполненные команды, под списком получившаяся разметка и номера.
Атрибуты тега ol: таблица type, start, reversed, value и compact
Собственных атрибутов у ol три: type, start и reversed. Ещё один, value, записывают у li. Остальные атрибуты в стандарте WHATWG глобальные: class, id, style и lang. Устаревший compactline-height в CSS.
| Атрибут | Статус | Что делает | Пример записи |
|---|---|---|---|
type | актуален | Вид номеров: 1, a, A, i, I | <ol type="a"> |
start | актуален | Число, с которого начинается список | <ol start="5"> |
reversed | актуален | Номера убывают сверху вниз | <ol reversed> |
value у li | актуален | Номер отдельного пункта, следующие продолжают счёт от него | <li value="7"> |
compact | устарел | Когда-то делал список плотнее, сейчас это задают отступы в CSS | li { margin: 0; } |
class, id, style, lang | актуален | Глобальные атрибуты: работают у любого элемента | <ol class="steps"> |
Вопросы про тег ol: длинные номера и копирование списка
Два вопроса, которых нет в разделах выше: что происходит с очень длинными номерами и попадают ли номера в скопированный текст.
Что будет, если в ol номера из четырёх цифр и длиннее?
Номер находится в отступе слева, и его ширина растёт вместе с числом цифр. Когда номер шире отступа, он выходит за левый край списка. На странице его ещё видно, но в контейнере с overflow: hidden, например в карточке или слайдере, он обрезается. Лечат это увеличением padding-left у ol.
ol {
padding-left: 64px;
}Пример: длинные номера и отступ
Меняйте число, включайте обрезку и широкий отступ: зелёная пунктирная рамка — контейнер списка.
Копируются ли номера ol вместе с текстом?
Нет: в Chrome номера в содержимое пунктов не входят. Метод getSelection().toString() возвращает только текст пунктов. Поэтому в тексте, который читатель скопирует, нумерации не будет, и если она нужна, её приходится записывать самому.
const r = document.createRange();
r.selectNodeContents(ol);
getSelection().addRange(r);
getSelection().toString();Пример: что попадает в выделенный текст
Нажмите кнопку: скрипт выделит список и прочитает выделенный текст.
Частые ошибки с тегом ol
Типичные ошибки с тегом ol и как их исправить.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Номер записан в тексте пункта: <li>1. Чай</li> | Номер выводится дважды: «1. 1. Чай» | Не писать номера: их считает ol |
ol для списка, где порядок не важен | Цифры подсказывают порядок, которого нет | Записать ul |
Нумерация вручную через <br> и цифры | Нет списка в разметке, номера не пересчитываются | Записать ol и пункты li |
Второй список с start после правки первого | Нумерация расходится: число в start устарело | Оставить один ol или пересчитать start |
type="a" вместе с start="0" | Вместо буквы выводится цифра 0 | Для букв начинать не раньше 1 |
Дробное или текстовое значение в start | У дроби отбрасывается дробная часть, текст игнорируется и список начинается с 1 | Записывать целое число |
li внутри div или текст прямо в ol | Браузер выводит, валидатор считает ошибкой | Записывать всё внутри li |
li { display: block } без причины | У пункта пропадает номер, а счёт сдвигается | Не менять display у li или вернуть list-item |
list-style-type: cyrillic | Браузер показывает обычные цифры | Записать собственный набор через @counter-style |
ol внутри p | Абзац разрывается, остаётся пустой p | Записать абзац, список и ещё один абзац |
padding: 0 у ol в контейнере с overflow: hidden | Номера обрезаны | Оставить отступ слева шире самого длинного номера |
