HTML :: Тег <ol>
http://belarusweb.net
Основы создания сайтов

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 – арабские цифры (по умолчанию).
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

HTML Результат BwCodes
<!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 Результат BwCodes
<!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