HTML <ol> тег
HTML тег <ol> создаёт упорядоченный список. Атрибуты type, start, reversed и CSS list-style-type с примерами.
HTML тег <ol> используется для создания упорядоченного списка, элементы которого расположены в определённой последовательности.
Каждый элемент упорядоченного списка начинается с открывающего тега <li> и заканчивается закрывающим тегом </li>. Помимо текста, тег <li> может содержать другие HTML-элементы (списки, изображения, заголовки, абзацы и т.д.).
Как правило, элементы упорядоченного списка имеют предшествующий маркер — букву или цифру.
Атрибут type определяет, какой вид маркера используется. Возможные значения:
type="1"— арабские цифры (1, 2, 3, ...). Используется по умолчанию.type="A"— прописные латинские буквы (A, B, C, ...).type="a"— строчные латинские буквы (a, b, c, ...).type="I"— прописные римские цифры (I, II, III, ...).type="i"— строчные римские цифры (i, ii, iii, ...).
Если атрибут type не указан, содержимое тега <ol> нумеруется арабскими цифрами, начиная с единицы.
Атрибут type является презентационным — он управляет внешним видом списка, а не его смыслом. Современный рекомендуемый подход — задавать маркер в CSS с помощью свойства list-style-type, отделяя оформление от разметки. Эквиваленты в CSS: type="1" → decimal, type="A" → upper-alpha, type="a" → lower-alpha, type="I" → upper-roman, type="i" → lower-roman.
Теги <ol> и <ul> оба представляют список элементов. Отличие тега <ol> состоит в том, что порядок элементов в нём имеет значение.
Теги <ol> и <ul> можно вкладывать друг в друга настолько глубоко, насколько это необходимо, чередуя их в любом порядке.
Если к тегу <ol> применяются свойства CSS, то элементы, вложенные в тег <li>, их наследуют.
Синтаксис
Тег <ol> используется в паре. Содержимое записывается между открывающим (<ol>) и закрывающим (</ol>) тегами.
Пример HTML тега <ol>:
Пример упорядоченного списка с HTML тегом <ol>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Appetizers</li>
<li>Hot</li>
<li>Salads</li>
</ol>
<ol start="50">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol type="A">
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>В приведённом примере мы использовали атрибут start со значением «50».
Вместо того чтобы задавать маркер в разметке с помощью атрибута type, рекомендуется определять его в CSS через свойство list-style-type. Это позволяет хранить оформление в таблице стилей и повторно использовать правило для множества списков. В примере ниже маркер задаётся в блоке <style>, а не через атрибут style=:
Пример HTML тега <ol> с CSS-свойством list-style-type:
Пример HTML тега <ol> со свойством list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.roman {
list-style-type: upper-roman;
}
.letters {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Examples of ordered lists</h2>
<ol class="roman">
<li>Cold drinks</li>
<li>Hot drinks</li>
<li>Ice-Cream</li>
</ol>
<ol class="letters">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
<ol>
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ol>
</body>
</html>Атрибут reversed
Добавление boolean-атрибута reversed нумерует список в убывающем порядке. Это удобно для обратных отсчётов «топ-5» или любых списков, где последний элемент должен иметь наименьший номер. Его можно комбинировать с атрибутом start, чтобы управлять начальным числом.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Top three drinks</h2>
<ol reversed>
<li>Coca-Cola</li>
<li>Ice Tea</li>
<li>Fanta</li>
</ol>
</body>
</html>Маркеры в этом примере считают в обратном порядке: 3, 2, 1.
Вложенные упорядоченные списки
Элемент списка может содержать другой тег <ol>, что позволяет создавать структуры с подпунктами. Каждый вложенный список начинает собственную нумерацию с начала. Вложенный <ol> следует размещать внутри родительского <li> (не между элементами списка), чтобы структура оставалась корректной.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ol>
<li>Drinks
<ol type="a">
<li>Cold drinks</li>
<li>Hot drinks</li>
</ol>
</li>
<li>Desserts
<ol type="a">
<li>Ice-Cream</li>
<li>Cake</li>
</ol>
</li>
</ol>
</body>
</html>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| compact | compact | Указывал браузеру отображать список более компактно, с меньшими отступами между элементами. Устарел и не поддерживается в HTML5. Для уменьшения отступов используйте CSS-свойства margin и padding для элементов <li> (или <ol>). |
| reversed | reversed | Указывает, что элементы списка должны отображаться в убывающем порядке (вместо обычного возрастающего). |
| start | number | Задаёт число, с которого начинается упорядоченный список. Значение должно быть целым числом; допускаются отрицательные значения. При использовании с буквами (type="A" и type="a") число указывает порядковую позицию буквы в алфавите. Например, start="5" соответствует букве «E», и список начинается с неё. Если указано start="27", список становится двузначным (27 = «AA», 28 = «AB», 29 = «AC», ...). |
| type | 1, A, a, I, i | Определяет тип маркера списка (десятичные числа, прописные буквы, строчные буквы, прописные римские цифры, строчные римские цифры). |
Тег <ol> поддерживает глобальные атрибуты и атрибуты событий.
Связанные теги и свойства
<ul>— неупорядоченный (маркированный) список, когда порядок не имеет значения.<li>— элемент списка, используемый внутри<ol>и<ul>.list-style-type— CSS-свойство для выбора стиля маркера.
Как стилизовать HTML тег <ol>
{
"tag_name": "ol"
}