HTML тег <ol>
Поддержка браузерами
Описание
Нумерованный (упорядоченный) список - это HTML список, в котором порядок элементов имеет существенное значение. Примером может служить инструкция по установке веб-сервера, рецепты, оглавления книг и т.д., всё это относится к упорядоченным спискам.
Для создания нумерованного списка в HTML используется тег <ol>
(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> так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию
ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; padding-left: 40px; }
Пример
<ol> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ol> <ol start="50"> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ol>
Результат данного примера в окне браузера: