Содержание
Атрибут type | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
3.0+ | 1.0+ | 2.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Устанавливает вид маркера.
Синтаксис
<ol type="A | a | I | i | 1">...</ol>
Значения
Нумерованные списки представляют собой набор элементов с их порядковыми номерами.
Вид и тип нумерации зависит от атрибутов тега <ol>,
который и используется для создания списка. В качестве маркеров могут быть следующие
значения:
- заглавные латинские буквы;
- строчные латинские буквы;
- заглавные римские цифры;
- строчные римские цифры;
- арабские цифры.
В табл. 1 приведены различные значения атрибута type тега <ol> и результат их применения.
Код | Пример |
---|---|
<ol type=»A»>
… |
|
<ol type=»a»>
… |
|
<ol type=»I»>
… |
|
<ol type=»i»>
… |
|
<ol type=»1″>
… |
|
Значение по умолчанию
1
Аналог CSS
list-style-type
Валидация
Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег OL, атрибут type</title>
</head>
<body>
<ol type="a">
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
</ol>
</body>
</html>
Тег — упорядоченный список
Поддержка браузерами
Описание
Нумерованный (упорядоченный) список — это 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>
Результат данного примера в окне браузера:
: The Ordered List element — HTML
HTML-элемент <ol>
используется для упорядоченного списка — в частности для пронумерованного списка.
Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вклад в интерактивную часть, распакуйте https://github.com/mdn/interactive-examples и отправьте нам pull request.
Категории контента | Основной поток, и если дочерний элемент <ol> включает в себя хотя бы один элемент <li> , явный контент. |
---|---|
Разрешённое содержимое | Ноль или больше <li> элементов, которые, в свою очередь, содержат вложенные элементы <ol> или <ul> . |
Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
Разрешённые родители | Любой элемент, который принимает основной поток. |
Разрешённые ARIA-роли | directory , group , listbox , menu , menubar , radiogroup , tablist , toolbar , tree , presentation |
DOM-интерфейс | HTMLOListElement (en-US) |
Этот элемент включает глобальные атрибуты.
reversed
- Атрибут логического значения (bool) показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.
start
- Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация
type
в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы «г» или Римской «iv», используйтеstart="4"
. type
- Задаёт тип нумерации:
a
для строчных буквA
для заглавных буквi
для строчной Римской нумерацииI
для заглавной Римской нумерации1
для цифр (по умолчанию)
указанный тип используется для всего списка, если только не указан любой другой атрибут
type
в элементе<li>
.Note: Если тип цифр в списке не имеет значения (к примеру, юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS
list-style-type
(en-US).
Обычно, элементы списка отображены с маркером, предшествующим цифрам или буквам.
Элементы <ol>
и <ul>
могут быть вложены (nested) на любом уровне, чередуясь между элементами <ol>
и <ul>
.
Оба элемента <ol>
и <ul>
используются для списков. Различие лишь в том, что в элементе <ol>
порядок имеет значение, как в данных примерах:
- Инструкции рецепта
- Направление по заданному маршруту
- Список ингредиентов на информации о питании, в убывающих пропорциях.
Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, используйте элемент <ol>
— в противном случае <ul>
.
Обычный список
<ol>
<li>Fee</li>
<li>Fi</li>
<li>Fo</li>
<li>Fum</li>
</ol>
Результат HTML кода выше:
Список с Римскими числами
<ol type="i">
<li>Introduction</li>
<li>List of Greivances</li>
<li>Conclusion</li>
</ol>
Результат HTML кода выше:
Используя свойство
start
<p>Finishing places of contestants not in the winners’ circle:</p>
<ol start="4">
<li>Speedwalk Stu</li>
<li>Saunterin’ Sam</li>
<li>Slowpoke Rodriguez</li>
</ol>
Результат HTML кода выше:
Вложенный список
<ol>
<li>first item</li>
<li>second item
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>
<li>third item</li>
</ol>
Результат HTML кода выше:
Неупорядоченный список внутри упорядоченного списка
<ol>
<li>first item</li>
<li>second item
<ul>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ul>
</li>
<li>third item</li>
</ol>
Результат HTML кода выше:
BCD tables only load in the browser
- Другие элементы HTML списка:
<ul>
,<li>
,<menu>
- CSS-свойства, которые могут быть полезны для стилизации
<ol>
элемента:- свойство
list-style
(en-US), для порядковых показов - CSS счётчики, для более сложных вложенных списков
- свойство line-height, для замены убранного свойства compact
- Свойство margin, для контроля отступа в списке
- свойство
Тег | HTML справочник
HTML теги
Значение и применение
Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).
Поддержка браузерами
Атрибуты
Атрибут | Значение | Описание |
---|---|---|
compact | compact | Не поддерживается в HTML5. Указывает, что список должен быть меньше обычного размера (line-height: 80%). Используйте CSS вместо данного атрибута. |
reversed | reversed | Указывает, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge. |
start | number | Определяет начальное значение нумерованного (упорядоченного) списка. Значения должны быть целочисленными, допускается использование отрицательных значений. При использовании с буквами (type = «A» и type = «a»), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4», будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным («27» = «AA», «28» = «AB», «29» = «AC»…). |
type | 1(по умолчанию) A(большие) a(строчные) I(римские большие) i(римские маленькие) |
Определяет тип маркера, который используется в построении нумерованного (упорядоченного) списка. |
Пример использования
<!DOCTYPE html> <html> <head> <title>Пример использования тега <ol> </title> </head> <body> <ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега <ol>.
Например:
<ol start = "101"> <!--список начнётся с номера 101-->
Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию («A» – большие, «a» – строчные), либо нумерацию из римских цифр («I» – в верхнем регистре, «i» – в нижнем регистре).
Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута type HTML тега <оl></title> </head> <body> <ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Виды нумерованных списков.
Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка <li>):
<!DOCTYPE html> <html> <head> <title>Пример нумерованного списка, вложенного в другой нумерованный список</title> </head> <body> <ol> <li>Первый пункт <ol> <!--открываем новый нумерованный список внутри элемента списка--> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Второй пункт.
- Третий пункт.
Отличия HTML 4.01 от HTML 5
В HTML5 добавлен новый атрибут reversed, атрибут compact больше не поддерживается в HTML5 .
Значение CSS по умолчанию
ol { display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 0px; margin-right: 0px; padding-left: 40px; }
Поддержка глобальных атрибутов
Элемент поддерживает «глобальные атрибуты».
Атрибуты событий
Элемент поддерживает «атрибуты событий».
HTML теги
Тег HTML нумерованный список
Тег <ol> в HTML определяет нумерованный список.
Список, созданный с помощью тега <ol> может иметь числовую или буквенную нумерацию. По умолчанию используется нумерация арабскими цифрами (1, 2, 3…). Тип нумерации можно изменить с помощью атрибута type.
Элемент списка определяется тегом <li>.
Помимо нумерованного списка в HTML можно создать маркированный список. Для этого следует использовать тег <ul>.
Расширенный набор типов нумерации доступен при использовании CSS свойств. Подробнее на странице: Создание списков. Все о HTML списках.
Синтаксис
<ol>элементы_списка_li</ol>
Отображение в браузере
- Создание дизайна
- Верстка
- Интеграция
- Продвижение
Пример использования <ol> в HTML коде
<!DOCTYPE html>
<html>
<head>
<title>Нумерованный список ol в HTML</title>
</head>
<body>
<ol>
<li>Создание дизайна</li>
<li>Верстка</li>
<li>Интеграция</li>
<li>Продвижение</li>
</ol>
</body>
</html>
Поддержка браузерами
Атрибуты тега <ol>
Атрибут | Значение | Описание |
---|---|---|
reversed |
reversed
|
Логический атрибут. Указывает на использовании обратной нумерации (9, 8, 7, 6, 5…). |
start | число |
Устанавливает стартовый номер для нумерации.
|
type | 1 A a I i |
Тип нумерации списка:
1 — арабские цифры (1, 2, 3, 4, 5…).
|
Тег <ol> также поддерживает глобальные HTML атрибуты.
Устаревшие атрибуты
Атрибут | Значение | Описание |
---|---|---|
compact |
compact
|
Логический атрибут. Указывает, что список должен быть выведен меньшим размером шрифта. В HTML5 используйте CSS. |
Тег ol
Пример
2 различных упорядоченных списков:
Coffee
Tea
Milk
<ol start=»50″>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Определение и использование
Тег <ol> определяет упорядоченный список. Упорядоченный список может быть числовым или алфавитным.
Используйте тег <li> для определения элементов списка.
Поддержка браузера
Элемент | |||||
---|---|---|---|---|---|
<ol> | Да | Да | Да | Да | Да |
Советы и примечания
Совет: Для неупорядоченного списка используйте тег<ul>
Совет:Использование CSS для составления списков стилей.
Различия между HTML 4,01 и HTML5
Атрибуты «start» и»type» были Устаревшие
в HTML 4,01, но поддерживаются в HTML5.
«reversed» атрибут является новым в HTML5.
Атрибут «compact» не поддерживается в HTML5.
Атрибуты
= Новый в HTML5.
Атрибут | Значение | Описание |
---|---|---|
compact | compact | Не поддерживается в HTML5. Указывает, что список должен отображать меньше, чем обычный |
reversed | reversed | Указывает, что порядок списков должен быть по убыванию (9,8,7…) |
start | number | Задает начальное значение упорядоченного списка |
type | 1 A a I i |
Указывает тип маркера для использования в списке |
Глобальные атрибуты
Тег <ol> также поддерживает Глобальные атрибуты в HTML.
Атрибуты события
Тег <ol> также поддерживает Атрибуты событий в HTML.
Похожие страницы
HTML Учебник: HTML Lists
HTML DOM reference: Ol Object
CSS Учебник: Styling Lists
Параметры CSS по умолчанию
В большинстве обозревателей элемент <ol> будет отображаться со следующими значениями по умолчанию:
Пример
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
HTML тег ol
Тег <ol> создает упорядоченный (нумерованный) список. Упорядоченный список может иметь цифровую или буквенную маркировку.
Для создания элементов списка используется тег <li>.
Для настройки стилей списка используйте CSS.
Разница между HTML 4.01 и HTML5
Атрибуты start и type были запрещены в HTML 4.01, но поддерживаются в HTML5.
Атрибут reversed был добавлен в HTML5.
Атрибуты compact не поддерживаются в HTML5.
Атрибуты тега <ol>
Атрибут | Описание |
---|---|
compact | Включает отображение компактного упорядоченного списка |
reversed | Устанавливает обратную нумерацию упорядоченного списка |
start | Определяет стартовое значение первого элемента упорядоченного списка |
type | Определяет вид маркера для упорядоченного HTML списка |
Общие атрибуты
Тег <ol> поддерживает общие атрибуты и атрибуты-события.
CSS стили по умолчанию
Большинство браузеров будут отображать тег <ol> со следующими стилями
ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
HTML пример использования
Два разных упорядоченных HTML списков:
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
<ol start="50">
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
HTML тег ol
Пример
Два разных упорядоченных списка (первый список начинается с 1, а второй
начинается с 50):
Кофе
Чай
Молоко
- Кофе
- Чай
- Молоко
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Тег
- определяет упорядоченный список.Упорядоченный список может быть числовым или алфавитным.
- используется для определения каждого элемента списка.
Совет: Используйте CSS для стилизации списков.
Совет: Для неупорядоченного списка используйте тег
- .
- Кофе
- Чай
- Молоко
- Кофе
- Чай
- Молоко
- Кофе
- Чай
- Черный чай
- Зеленый чай
- Молоко
- Кофе
- Чай
- Молоко
Поддержка браузера
Элемент Есть Есть Есть Есть Есть
Атрибуты
Атрибут Значение Описание обратное обратное Указывает, что порядок в списке должен быть обратным (9,8,7…) начало номер Задает начальное значение упорядоченного списка тип 1
A
a
I
iЗадает тип маркера для использования в списке
Глобальные атрибуты
Тег
- также поддерживает глобальные атрибуты в HTML.
Атрибуты событий
Тег
- также поддерживает атрибуты событий в HTML.
Другие примеры
Пример
Установить разные типы списков (с CSS):
Кофе
Чай
МолокоПопробуй сам »
Пример
Отображение всех различных типов списков, доступных с помощью CSS:
Попробуй сам »
Пример
Уменьшить и увеличить высоту строки в списках (с помощью CSS):
Кофе
Чай
Молоко<ол >
Попробуй сам »
Пример
Вложить неупорядоченный список в упорядоченный список:
Попробуй сам »
Связанные страницы
Учебное пособие по HTML: списки HTML
Ссылка на HTML DOM: Ol Object
Учебное пособие по CSS: списки стилей
Настройки CSS по умолчанию
Большинство браузеров будут отображать элемент
- со следующими значениями по умолчанию:
Пример
ol {
дисплей: блок;
список-стиль-тип: десятичный;
margin-top: 1em;
нижнее поле: 1em;
маржа слева: 0;
поле справа: 0;
padding-left: 40 пикселей;
}Попробуй сам »
HTML ol type Атрибут
❮ HTML тег
Пример
Упорядоченный список с прописными римскими числами:
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Атрибут
типа
определяет тип маркера для использования в списке (буквы или цифры).Совет: Свойство CSS list-style-type предлагает больше типов, чем
атрибуттипа
(см. пример ниже).
Поддержка браузера
Атрибут тип Есть Есть Есть Есть Есть
Синтаксис
Значения атрибутов
Значение Описание 1 По умолчанию.Десятичные числа (1, 2, 3, 4) a Список в алфавитном порядке, строчные буквы (a, b, c, d) А Список в алфавитном порядке, прописные (A, B, C, D) i Римские цифры в нижнем регистре (i, ii, iii, iv) I Римские цифры, прописные (I, II, III, IV)
Другие примеры
Пример
Отображение всех различных типов списков, доступных с помощью CSS:
<стиль>
ол.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style- тип:
десятичный-ведущий-ноль;}
ol.e {list-style-type: georgian;}
ol.f
{list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h
{list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style -тип:
lower-alpha;}
ol.l {тип-стиля списка: lower-greek;}
ol.м
{list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {список -style-type: upper-latin;}
ol.q {тип-стиля-списка: upper-roman;}
ol.r {тип-стиля-списка: none;}
ol.s {тип-стиля-списка : inherit;}
Попробуй сам »
❮ HTML тег
: элемент упорядоченного списка — HTML: язык разметки гипертекста
HTML-элемент
- представляет собой упорядоченный список элементов, обычно отображаемый в виде нумерованного списка.
Категории содержимого Содержимое потока, и если дочерние элементы элемента
один элемент
ощутимое содержание.Разрешенное содержание Ноль или более
Тег