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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
|
---
title: '<ul>: The Unordered List element'
slug: Web/HTML/Element/ul
translation_of: Web/HTML/Element/ul
---
<div>{{HTMLRef}}</div>
<p><strong>HTML-элемент <code><ul></code> </strong>используется для неупорядоченного списка - в частности для маркированного списка.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</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><ol></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("HTMLUListElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Свойства">Свойства</h2>
<p>Этот элемент включает <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
<dl>
<dt>{{ htmlattrdef("compact") }} {{Deprecated_inline}}</dt>
<dd>Атрибут логического значения (bool) говорит о том, что список будет представлен в более компактном стиле. Интерпретация этого атрибута зависит от {{glossary("user agent")}} и не работает со всеми браузерами.</dd>
<dd>
<div class="warning"><strong>Предупреждение:</strong> Не используйте этот атрибут, ибо он устаревший и больше не используется, используйте <a href="/en-US/docs/CSS">CSS</a>. Для схожего эффекта с <code>compact</code>, подойдёт свойство CSS {{cssxref("line-height")}} с значением <code>80%</code>.</div>
</dd>
</dl>
<dl>
<dt>{{ htmlattrdef("type") }} {{Deprecated_inline}}</dt>
<dd>Этот атрибут добавляет маркеры (bullets) в список. Значения установлены под <a href="/en-US/docs/HTML3.2">HTML3.2</a> и переходными на <a href="/en-US/docs/HTML4.01">HTML 4.0/4.01</a> являются:
<ul>
<li><code>circle</code></li>
<li><code>disc</code></li>
<li><code>square</code></li>
</ul>
<p>Четвёртый маркер задан в интерфейсе WebTV, но не все браузеры смогут его отобразить: <code>triangle</code>.</p>
<p>Если данный атрибут отсутствует и если атрибут <a href="/en-US/docs/CSS">CSS</a> {{ cssxref("list-style-type") }} не присвоен к данному элементу, пользовательский агент (user agent) выберет маркер в зависимости от вложенного уровня в списке.</p>
<div class="warning"><strong>Предупреждение:</strong> Не используйте этот атрибут, ибо он устаревший; используйте свойство <a href="/en-US/docs/Web/CSS">CSS</a> {{ cssxref("list-style-type") }}.</div>
</dd>
</dl>
<h2 id="Примечания_об_использовании">Примечания об использовании</h2>
<ul>
<li>Элемент <code><ul></code> используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, непорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS, используя свойство {{ cssxref("list-style-type") }}.</li>
<li>Элементы <code><ul></code> и {{HTMLElement("ol")}} могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между <code><ol></code> и <code><ul></code> без ограничений.</li>
<li>Элементы {{ HTMLElement("ol") }} и <code><ul></code> используются для списков. Различие лишь в том, что в элементе {{ HTMLElement("ol") }} порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент {{ HTMLElement("ol") }}, в противном случае используйте <code><ul></code>.</li>
</ul>
<h2 id="Примеры">Примеры</h2>
<h3 id="Простой_список">Простой список</h3>
<pre class="brush: html"><ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
</pre>
<p>Результат HTML кода выше:</p>
<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p>
<h3 id="Вложенный_список">Вложенный список</h3>
<pre class="brush: html"><ul>
<li>first item</li>
<li>second item
<!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem
<!-- Same for the second nested unordered list! -->
<ul>
<li>second item second subitem first sub-subitem</li>
<li>second item second subitem second sub-subitem</li>
<li>second item second subitem third sub-subitem</li>
</ul>
</li> <!-- Closing </li> tag for the li that
contains the third unordered list -->
<li>second item third subitem</li>
</ul>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul></pre>
<p>Результат HTML кода выше:</p>
<p>{{EmbedLiveSample("Nesting_a_list", 400, 220)}}</p>
<h3 id="Упорядоченный_список_внутри_неупорядоченного_списка">Упорядоченный список внутри неупорядоченного списка</h3>
<pre class="brush: html"><ul>
<li>first item</li>
<li>second item
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>third item</li>
</ul>
</pre>
<p>Результат HTML кода выше:</p>
<p>{{EmbedLiveSample("Ordered_list_inside_unordered_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-ul-element', '<ul>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat("html.elements.ul")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Остальные списковые HTML-элементы: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} и устаревший {{ HTMLElement("dir") }};</li>
<li>CSS-свойства, которые могут быть полезны для стилизации <code><ul></code> элементов:
<ul>
<li>свойство <a href="/en-US/docs/Web/CSS/list-style">list-style</a>, полезное для выбора способа отображения маркеров,</li>
<li><a href="/ru/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS счётчики</a>, для более сложных вложенных списков,</li>
<li>свойство <a href="/en-US/docs/Web/CSS/line-height">line-height</a>, для замены убранного свойства {{ htmlattrxref("compact", "ul") }},</li>
<li>свойство <a href="/en-US/docs/Web/CSS/margin">margin</a>, для контроля отступа в списке.</li>
</ul>
</li>
</ul>
|
