HTML :: Тег <ol>

В HTML тег <ol> (от англ. ordered list – упорядоченный список) предназначен для создания нумерованного (упорядоченного) списка, пункты которого формируются при помощи элементов <li>. По умолчанию браузеры отображают нумерованный список как блочный элемент, а пункты списка нумеруют по порядку, начиная с единицы.

Изменить тип маркера нумерованного списка легко при помощи css-свойства list-style-type. Кроме того, в качестве маркеров списка можно использовать изображения. Для этого используется css-свойство list-style-image.

Синтаксис

	<ol>
	  ...
	  <li>...</li>
	  ...
	</ol>		        
	
	Закрывающий тег: обязателен.

Атрибуты

reversed – устанавливает нумерацию пунктов списка по убыванию, т.е. от больших значений номеров к меньшим (в IE не работает).
start – задает число, с которого будет начинаться нумерация списка.
type – устанавливает вид маркера нумерованного списка. Может принимать значения:
- A – заглавные латинские буквы,
- a – строчные латинские буквы,
- I – заглавные римские цифры,
- i – строчные римские цифры,
- 1 – арабские цифры (по умолчанию).
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №1</title>
</head>
<body>
	
  <p>Весенние месяцы по порядку:</p>
   
  <ol start="3" title="Весенние месяцы">
    <li>март</li>
    <li>апрель</li>
    <li>май</li>
  </ol>
   
  <p>Летние месяцы в обратном порядке:</p>
   
  <!-- Перечисляем в обратном порядке. В IE не работает! -->
  <ol start="8" reversed>
    <li>август</li>
    <li>июль</li>
    <li>июнь</li>
  </ol>	
	
</body>
</html>

Пример №1

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Пример №2</title>
</head>
<body>
	
	<p>
		Примеры использования различных
		значений атрибута type:
	</p>
  
   <ol>
	  
		<li>
			<ol type="A">
				<li>Первый пункт списка</li>
				<li>Второй пункт списка</li>
				<li>Третий пункт списка</li>
			</ol><br>
		</li>		  
		  
		<li>	
			<ol type="a">
				<li>Первый пункт списка</li>
				<li>Второй пункт списка</li>
				<li>Третий пункт списка</li>
			</ol><br>
		</li>
		  
		<li>   
			<ol type="I">
				<li>Первый пункт списка</li>
				<li>Второй пункт списка</li>
				<li>Третий пункт списка</li>
			</ol><br>
		</li>		  
		  
		<li>   
			<ol type="i">
				<li>Первый пункт списка</li>
				<li>Второй пункт списка</li>
				<li>Третий пункт списка</li>
			</ol><br>
		</li>		  
		  
		<li>   
			<ol type="1">
				<li>Первый пункт списка</li>
				<li>Второй пункт списка</li>
				<li>Третий пункт списка</li>
			</ol><br>
		</li>
	  
	</ol>
</body>
</html>

Пример №2