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

---
title: <li>
slug: Web/HTML/Element/li
tags:
  - Element
  - HTML
  - Reference
  - списки
translation_of: Web/HTML/Element/li
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;li&gt;</code></strong> используется для создания элементов списка.</span> Он также должен находиться в родительском элементе: упорядоченном списке ({{HTMLElement("ol")}}), неупорядоченном списке ({{HTMLElement("ul")}}), или меню ({{HTMLElement("menu")}}). В меню и неупорядоченных списках, элементы списка обычно отображаются с маркерами в виде круга. В упорядоченных списках, они обычно отображаются с маркерами в виде возрастающего счётчика слева, например числа или буквы.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/li.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="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
   <td>Нет.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённое содержимое</th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Потоковый_контент">Потоковый контент</a></td>
  </tr>
  <tr>
   <th scope="row">Пропуск тегов</th>
   <td>Закрывающий тег может быть опущен, если за элементом непосредственно следует другой элемент {{HTMLElement("li")}} или если в родительском элементе нет больше содержимого.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родители</th>
   <td>Элементы {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, или {{HTMLElement("menu")}}. Хотя и не соответствует использованию, устаревший {{HTMLElement("dir")}} тоже может быть родительским элементом.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые ARIA-роли</th>
   <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM-интерфейс</th>
   <td>{{domxref("HTMLLIElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

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

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>Этот числовой атрибут указывает на текущий порядковый номер элемента в списке, заданного с помощью элемента {{HTMLElement("ol")}}. Единственное разрешённое значение этого атрибута — число, даже если список отображается с римскими цифрами или буквами. Элементы списка, которые идут после элемента с таким атрибутом, нумеруются с заданного значения. Атрибут <strong>value</strong> не имеет значения для неупорядоченных списков ({{HTMLElement("ul")}}) или для меню ({{HTMLElement("menu")}}).
 <div class="note"><strong>Примечание</strong>: Этот атрибут был убран в HTML4, но заново добавлен в HTML5.</div>

 <div class="note">
 <p><strong>Примечание:</strong> Предыдущие до {{Gecko("9.0")}}, отрицательные значения неправильно конвертировались в 0. Начиная с {{Gecko("9.0")}} все числовые значения воспринимаются правильно.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
 <dd>Этот символьный атрибут указывает на тип нумерации:
 <p class="hidden">Строчные буквы — это которые не заглавные.</p>

 <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>
 Этот атрибут переопределяет тип унаследованный от родительского элемента {{HTMLElement("ol")}} или любого другого.

 <div class="note"><strong>Примечание к использованию:</strong> Этот атрибут был убран: используйте CSS свойство {{cssxref("list-style-type")}} взамен.</div>
 </dd>
</dl>

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

<p>Для более подробных примеров смотрите страницы {{htmlelement("ol")}} и {{htmlelement("ul")}}.</p>

<h3 id="Упорядоченный_список">Упорядоченный список</h3>

<pre class="brush: html notranslate">&lt;ol&gt;
    &lt;li&gt;Первый элемент&lt;/li&gt;
    &lt;li&gt;Второй элемент&lt;/li&gt;
    &lt;li&gt;Третий элемент&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>{{EmbedLiveSample("Упорядоченный_список")}}</p>

<h3 id="Упорядоченный_список_с_пользовательским_значением">Упорядоченный список с пользовательским значением</h3>

<pre class="brush: html notranslate">&lt;ol type="I"&gt;
    &lt;li value="3"&gt;Третий элемент&lt;/li&gt;
    &lt;li&gt;Четвёртый элемент&lt;/li&gt;
    &lt;li&gt;Пятый элемент&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>{{EmbedLiveSample("Упорядоченный_список_с_пользовательским_значением")}}</p>

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

<pre class="brush: html notranslate">&lt;ul&gt;
    &lt;li&gt;Первый элемент&lt;/li&gt;
    &lt;li&gt;Второй элемент&lt;/li&gt;
    &lt;li&gt;Третий элемент&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>{{EmbedLiveSample("Неупорядоченный_список")}}</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-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Атрибут <code>type</code> был убран.</td>
  </tr>
 </tbody>
</table>

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

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

<ul>
 <li>Остальные списковые HTML элементы: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} и устаревший {{HTMLElement("dir")}};</li>
 <li>CSS свойства, которые были бы полезны для стилизации <code>&lt;li&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>свойство {{cssxref("margin")}}, для контроля отступа между элементами списка.</li>
  </ul>
 </li>
</ul>