Нумерованный, или упорядоченный, список - это тот случай, когда порядок пунктов играет решающую роль. Представьте себе пошаговую инструкцию по настройке веб-сервера или оглавление увлекательной книги: именно здесь важна последовательность! Без строгого порядка смысл таких документов просто теряется.
В мире HTML мы создаем такие списки с помощью тега ol. Это сокращение от английского ordered list, что переводится как «упорядоченный список». Этот тег работает как команда для браузера: все, что находится внутри него до закрывающего тега /ol, должно быть оформлено именно как нумерованный перечень. Поскольку ol является блочным элементом, он уверенно занимает всю доступную ширину, а его высота гибко подстраивается под объем содержимого.
Каждый отдельный пункт в таком списке задается тегом li. И вот что здорово: внутри этих элементов можно разместить практически любые HTML-конструкции! Будь то другие списки, красивые изображения, заголовки или целые абзацы текста - все это уместно. По умолчанию браузеры начинают отсчет с единицы, а каждый следующий элемент получает номер на один больше предыдущего. Кроме того, браузер автоматически добавляет приятный отступ слева для лучшей читаемости.
Примечание: если хочется разнообразия, тип маркера можно изменить с помощью CSS свойства list-style-type или даже заменить цифры на изображения через свойство list-style-image. А для тех случаев, когда порядок не важен, существуют маркированные (неупорядоченные) списки, которые создаются тегом ul.
Атрибуты - reversed:
- Этот атрибут добавляет немного интриги: он заставляет элементы списка идти в обратном порядке, то есть по убыванию (вместо привычного возрастания). Возможные значения логического атрибута:
ol reversed ol reversed="reversed" ol reversed=""
Примечание: стоит учитывать, что атрибут reversed поддерживается только браузерами Chrome и Safari.
- start:
- Позволяет установить начальное целочисленное значение. Благодаря этому вы можете начать нумерацию с любого удобного для вас числа, а не обязательно с единицы.
- type:
- Определяет стиль маркера, который будет использоваться для элементов списка:
- 1 - классические десятичные числа (1, 2, 3, 4 ...).
- A - латинские буквы в алфавитном порядке, в верхнем регистре (A, B, C, D ...).
- a - латинские буквы в алфавитном порядке, в нижнем регистре (a, b, c, d ...).
- I - римские цифры в верхнем регистре (I, II, III, IV ...).
- i - римские цифры в нижнем регистре (i, ii, iii, iv ...).
Тег ol так же поддерживает и другие стандартные глобальные атрибуты HTML.
Пример<ol> <li>Кофе</li> <li>Чай</li> <li>Молоко</li></ol><ol start="50"> <li>Кофе</li> <li>Чай</li> <li>Молоко</li></ol>