path: root/files/ru/web/html/element/ol/index.html

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

<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;ol&gt;</code></strong> используется для упорядоченного списка — в частности для пронумерованного списка.</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div>

<p class="hidden">Источник для интерактивного примера расположен в GitHub. Если вы желаете сделать вклад в интерактивную часть, распакуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> и отправьте нам pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/HTML/Content_categories">Категории контента</a></th>
   <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Основной поток</a>, и если дочерний элемент <code>&lt;ol&gt;</code> включает в себя хотя бы один элемент {{HTMLElement("li")}}, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">явный контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённое содержимое</th>
   <td>Ноль или больше {{HTMLElement("li")}} элементов, которые, в свою очередь, содержат вложенные элементы {{ HTMLElement("ol") }} или {{ HTMLElement("ul") }}.</td>
  </tr>
  <tr>
   <th scope="row">Пропуск тегов</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родители</th>
   <td>Любой элемент, который принимает <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">основной поток</a>.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые ARIA-роли</th>
   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM-интерфейс</th>
   <td>{{DOMxRef("HTMLOListElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Свойства">Свойства</h2>

<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>

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

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

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

<h2 id="Примечания_об_использовании">Примечания об использовании</h2>

<p>Обычно, элементы списка отображены с <a href="/en-US/docs/Web/CSS/::marker">маркером</a>, предшествующим цифрам или буквам.</p>

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

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

<ul>
 <li>Инструкции рецепта</li>
 <li>Направление по заданному маршруту</li>
 <li>Список ингредиентов на информации о питании, в убывающих пропорциях.</li>
</ul>

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

<h2 id="Примеры">Примеры</h2>

<h3 id="Обычный_список">Обычный список</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;Fee&lt;/li&gt;
  &lt;li&gt;Fi&lt;/li&gt;
  &lt;li&gt;Fo&lt;/li&gt;
  &lt;li&gt;Fum&lt;/li&gt;
&lt;/ol&gt;
</pre>

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

<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p>

<h3 id="Список_с_Римскими_числами">Список с Римскими числами</h3>

<pre class="brush: html">&lt;ol type="i"&gt;
  &lt;li&gt;Introduction&lt;/li&gt;
  &lt;li&gt;List of Greivances&lt;/li&gt;
  &lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ol&gt; </pre>

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

<p>{{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}</p>

<h3 id="Используя_свойство_start">Используя свойство <code>start</code></h3>

<pre class="brush: html">&lt;p&gt;Finishing places of contestants not in the winners’ circle:&lt;/p&gt;

&lt;ol start="4"&gt;
  &lt;li&gt;Speedwalk Stu&lt;/li&gt;
  &lt;li&gt;Saunterin’ Sam&lt;/li&gt;
  &lt;li&gt;Slowpoke Rodriguez&lt;/li&gt;
&lt;/ol&gt;
</pre>

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

<p>{{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}</p>

<h3 id="Вложенный_список">Вложенный список</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item  &lt;!-- closing &lt;/li&gt; tag not here! --&gt;
    &lt;ol&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem&lt;/li&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;            &lt;!-- Here's the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
</pre>

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

<p>{{EmbedLiveSample("Nesting_lists", 400, 150)}}</p>

<h3 id="Неупорядоченный_список_внутри_упорядоченного_списка">Неупорядоченный список внутри упорядоченного списка</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item  &lt;!-- closing &lt;/li&gt; tag not here! --&gt;
    &lt;ul&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem&lt;/li&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;            &lt;!-- Here's the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
</pre>

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

<p>{{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}</p>

<h2 id="Спецификации">Спецификации</h2>

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

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("html.elements.ol")}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Другие элементы HTML списка: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li>
 <li>CSS свойства, которые могут быть полезны для стилизации <code>&lt;ol&gt;</code> элемента:
  <ul>
   <li>свойство {{CSSxRef("list-style")}}, для порядковых показов</li>
   <li><a href="/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков</li>
   <li>свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS/line-height">line-height</a>, для замены убранного свойства <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/ol#attr-compact">compact</a></li>
   <li>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/CSS/margin">margin</a>, для контроля отступа в списке</li>
  </ul>
 </li>
</ul>