<ol> HTML

Become a Patron!

Тег <ol> (от англ. ordered list — упорядоченный список) устанавливает нумерованный (упорядоченный) список.

Каждый элемент списка должен начинаться с <li>. Если к <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Синтаксис

<ol>
  <li>элемент нумерованного списка</li>
  <li>элемент нумерованного списка</li>
</ol>

Закрывающий тег обязателен.

WAI ARIA

Значение role по умолчанию: list

Допустимые значения role:

  • directory
  • group
  • listbox
  • menu
  • menubar
  • none
  • presentation
  • radiogroup
  • tablist
  • toolbar
  • tree

Атрибуты

  • type — Устанавливает вид маркера списка.
  • reversed — Нумерация в списке становится по убыванию (3,2,1).
  • start — Задаёт число, с которого будет начинаться нумерованный список.

Также для этого элемента доступны универсальные атрибуты и события.

type

Устанавливает вид нумерации в упорядоченном (нумерованном) списке.

Синтаксис

<ol type="A | a | I | i | 1">...</ol>

Значения

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов элемента <ol>, который и используется для создания списка. В качестве маркеров могут быть следующие значения:

  • A — заглавные латинские буквы;
  • a — строчные латинские буквы;
  • I — заглавные римские цифры;
  • i — строчные римские цифры;
  • 1 — арабские цифры.

Значение по умолчанию

1

reversed

Меняет нумерацию в списке на обратный порядок, вместо 1,2,3 будет выводиться 3,2,1.

Синтаксис

<ol reversed>
 ...
</ol>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

start

Атрибут start устанавливает номер, с которого будет начинаться нумерованный список. При этом не имеет значения, какой тип списка установлен с помощью type, атрибут start одинаково работает и с римскими и с арабскими числами.

Синтаксис

<ol start="<число>">
 <li>Элемент списка</li>
</ol>

Значения

Любое положительное целое число.

Значение по умолчанию

Нет.

Спецификации

Примеры

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>OL</title>
    </head>
    <body> 
        <ol>
            <li>Чебурашка</li>
            <li>Крокодил Гена</li>
            <li>Шапокляк</li>
        </ol>
    </body>
</html>