<divelopers>: “You don't know HTML: нумерованные списки В HTML есть элемент <ol>, кот…”

You don't know HTML: нумерованные списки

В HTML есть элемент <ol>, который создаёт нумерованный или упорядоченный список. У таких списков есть встроенный счётчик и маркеры. По умолчанию они отображаются в виде цифр перед элементами списка.

<ol>
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ol>

<!--
1. Foo
2. Bar
3. Baz
-->

Нумерованные списки используются не часто, но мест, где их можно применить, достаточно много. В дизайне встречаются блоки, где важен порядок элементов: рейтинг, хронология, многоэтапная форма, эпизоды подкаста и так далее.

Особенности списков могут помочь создавать такие блоки. Вместо того, чтобы генерировать номера в цикле при обработке серверных или клиентских шаблонов, позвольте браузеру сделать это за вас.

Атрибут reversed меняет направление нумерации списка, от большего к меньшему. Сам порядок элементов при этом остаётся прежним. Удобно для списков «от последнего к первому».

<ol reversed>
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ol>

<!--
3. Foo
2. Bar
1. Baz
-->

Атрибут start задаёт начальное значение для отсчёта. Это позволяет разбивать большой список на несколько более мелких списков и продолжать нумерацию. Это применимо для вывода списка эпизодов подкаста с пагинацией. Атрибут start можно комбинировать с reversed и даже уйти в минус.

<h2>Эпизоды</h2>
<ol start="12" reversed>
  <li>Состояние доступности в 2024</li>
  <li>Профессиональный рост в веб-доступности</li>
  <li>ИИ, доступность и заменят ли нас машины</li>
</ol>
<!-- следующая страница -->
<h2>Эпизоды</h2>
<ol start="9" reversed>
  <li>Визуальная и невизуальная доступность</li>
  <li>Доступные тексты и текстовые альтернативы</li>
  <li>Прошлое и настоящее WCAG</li>
</ol>

<!--
Эпизоды

12. Состояние доступности в 2024
11. Профессиональный рост в веб-доступности
10. ИИ, доступность и заменят ли нас машины



Эпизоды

9. Визуальная и невизуальная доступность
8. Доступные тексты и текстовые альтернативы
7. Прошлое и настоящее WCAG
-->

Атрибут value задаёт значение счётчика текущему элементу списка. Общая нумерация продолжается с этого значения вверх или вниз в зависимости от наличия атрибута reversed. Это можно применить для пропуска значений при реализации блока с хронологией:

<ol start="2015">
  <li>Начало работы над проектом</li>
  <li value="2017">Запуск первой версии продукта</li>
  <li>Расширение команды разработчиков</li>
  <li value="2020">Выход на международный рынок</li>
  <li>Внедрение новых технологий</li>
  <li>Получение престижной награды</li>
</ol>

<!--
2015. Начало работы над проектом
2017. Запуск первой версии продукта
2018. Расширение команды разработчиков
2020. Выход на международный рынок
2021. Внедрение новых технологий
2022. Получение престижной награды
-->

Атрибут type задаёт один из предопределённых типов маркеров. Вместо арабских цифр можно использовать римские цифры или латинские буквы, причём как в верхнем регистре, так и в нижнем.

<ol type="I">
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ol>

<ol type="a">
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ol>

<!--
  I. Foo
 II. Bar
III. Baz

a. Foo
b. Bar
c. Baz
-->

Маркер списка стилизуется при помощи псевдо-элемента ::marker, но доступен только ограниченный набор свойств. Можно сбросить стандартный счётчик и реализовать свой через свойство content псевдо-элемента ::before:

ol {
  list-style: none;
  counter-reset: list;
}

li {
  counter-increment: list;
}

li::before {
  content: counter(list) '. ';
  /* другие стили */
}

Такой вариант даёт полную свободу стилизации, но атрибуты start, reversed и value не будут работать. Частично их наличие можно учитывать при стилизации маркеров, используя селектор по атрибутам.

#ydkhtml