files/ru/web/html/element/li/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

---
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>

<div class="hidden">Таблица совместимости на этой странице создаётся из структурированных данных. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам pull request.</div>

<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>