Элемент | ||||||
<ol> | 1+ | 1+ | 1+ | 1+ | 1+ | 1+ |
HTML тег <ol>
Элемент <ol> (от англ. "ordered list" ‒ «упорядоченный список») создаёт нумерованный (упорядоченный) список. Упорядоченный список может иметь цифровую или буквенную маркировку.
Тег <ol> относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.
Элементы для нумерованных списков определяются с помощью тега <li>, который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию нумерация элементов списка начинается с единицы и каждый следующий элемент, получает номер на одну единицу больше, чем предшествующий. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.
Примечание: Если к <ol> применяется CSS свойство, то элементы <li> наследуют эти свойства.
Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Маркированные (неупорядоченные) списки определяются с помощью тега <ul>.
Синтаксис
<ol>
...
<li> ... </li>
...
</ol>
Закрывающий тег
Обязателен.
Атрибуты
- compactУстарел в HTML5
- Сокращает отступы и расстояния между строками.
- typeHTML5
- Устанавливает вид маркера списка.
- reversed
- Нумерация в списке становится по убыванию (3,2,1).
- startHTML5
- Задаёт число, с которого будет начинаться нумерованный список.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент <ol> со следующими значениями CSS по умолчанию:
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Различия между HTML 4.01 и HTML5
Атрибуты start и type были запрещены в HTML 4.01, но поддерживаются в HTML5.
В HTML5 добавлен новый атрибут reversed, атрибут compact больше не поддерживается в HTML5 .
Пример использования:
Два разных упорядоченных HTML списка:
Пример HTML:
Попробуй сам<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Какао</li>
</ol>
<ol start="50">
<li>Кофе</li>
<li>Чай</li>
<li>Какао</li>
</ol>
Спецификации
Спецификация | Статус |
---|---|
WHATWG HTML Living Standard (WHATWG) | Живой стандарт |
HTML 4.01 (W3C) | Рекомендация |
HTML5 (W3C) | Рекомендация |
HTML 5.1 (W3C) | Рекомендация |
Поддержка браузерами
Попробуйте сами - Примеры
Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и start
Как изменить номер данного элемента списка:
Применение атрибута value
Как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-type
Как создать вложенные списки:
Вложенные списки
Учебник HTML
HTML уроки: HTML Списки