--- title: '
    : The Ordered List element' slug: Web/HTML/Element/ol tags: - HTML - Основной поток - элементы translation_of: Web/HTML/Element/ol ---
    {{HTMLRef}}

    HTML-элемент <ol> используется для упорядоченного списка — в частности для пронумерованного списка.

    {{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}
    Категории контента Основной поток, и если дочерний элемент <ol> включает в себя хотя бы один элемент {{HTMLElement("li")}}, явный контент.
    Разрешённое содержимое Ноль или больше {{HTMLElement("li")}} элементов, которые, в свою очередь, содержат вложенные элементы {{ HTMLElement("ol") }} или {{ HTMLElement("ul") }}.
    Пропуск тегов {{no_tag_omission}}
    Разрешённые родители Любой элемент, который принимает основной поток.
    Разрешённые ARIA-роли {{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}
    DOM-интерфейс {{DOMxRef("HTMLOListElement")}}

    Свойства

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

    {{HTMLAttrDef("reversed")}}
    Атрибут логического значения (bool)  показывает, что предметы указаны по списку в обратном порядке. Пункты в списке будут пронумерованы от большего к меньшему.
    {{HTMLAttrDef("start")}}
    Нумерация начнётся с указанного числа. Арабскими цифрами (1, 2, 3, и т.д.), даже когда нумерация type в буквах или Римском исчислении. Например, чтобы начать нумерацию с буквы "г" или Римской "iv", используйте start="4".
    {{HTMLAttrDef("type")}}
    Задаёт тип нумерации:
    • a для строчных букв
    • A для заглавных букв
    • i для строчной Римской нумерации
    • I для заглавной Римской нумерации
    • 1 для цифр (по умолчанию)

    указанный тип используется для всего списка, если только не указан любой другой атрибут {{HTMLAttrxRef("type", "li")}} в элементе {{HTMLElement("li")}}.

    Note: Если тип цифр в списке не имеет значения (к примеру,  юридические или технические документы, где элементы обозначены буквами/цифрами), используйте свойство CSS {{CSSxRef("list-style-type")}}.

    Заметки об использовании

    Обычно, элементы списка отображены с маркером, предшествующим цифрам или буквам.

    Элементы <ol> и {{HTMLElement("ul")}} могут быть вложены (nested) на любом уровне, чередуясь между элементами <ol> и <ul>.

    Оба элемента <ol> и {{HTMLElement("ul")}}  используются для списков. Различие лишь в том, что в элементе <ol> порядок имеет значение, как в данных примерах:

    Чтобы определить, каким списком пользоваться, можно поменять порядок элементов с списке.Если значение меняется, используйте элемент <ol>  — в противном случае {{HTMLElement("ul")}}.

    Примеры

    Обычный список

    <ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>

    Результат HTML кода выше:

    {{EmbedLiveSample("Simple_example", 400, 100)}}

    Список с Римскими числами

    <ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol>

    Результат HTML кода выше:

    {{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}

    Используя свойство 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 кода выше:

    {{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}

    Вложенный список

    <ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

    Результат HTML кода выше:

    {{EmbedLiveSample("Nesting_lists", 400, 150)}}

    Неупорядоченный список внутри упорядоченного списка

    <ol>
  <li>first item</li>
  <li>second item  <!-- closing </li> tag not here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>            <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>

    Результат HTML кода выше:

    {{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}

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

    Спецификация Статус Комментарий
    {{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '<ol>')}} {{Spec2('HTML WHATWG')}} Без изменений с последнего W3C, {{SpecName('HTML5 W3C')}}.
    {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}} {{Spec2('HTML5 W3C')}} Добавлено reversed и приписан start; возможно использование type
    {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}} {{Spec2('HTML4.01')}} Были убраны compact и type.

    Поддержка браузерами

    {{Compat("html.elements.ol")}}

    Смотрите также