From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:52 -0500
Subject: initial commit

---
 files/ru/web/html/element/ul/index.html | 186 ++++++++++++++++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 files/ru/web/html/element/ul/index.html

(limited to 'files/ru/web/html/element/ul/index.html')

diff --git a/files/ru/web/html/element/ul/index.html b/files/ru/web/html/element/ul/index.html
new file mode 100644
index 0000000000..08d5c01b00
--- /dev/null
+++ b/files/ru/web/html/element/ul/index.html
@@ -0,0 +1,186 @@
+---
+title: '<ul>: The Unordered List element'
+slug: Web/HTML/Element/ul
+translation_of: Web/HTML/Element/ul
+---
+<div>{{HTMLRef}}</div>
+
+<p><strong>HTML-элемент <code>&lt;ul&gt;</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="https://wiki.developer.mozilla.org/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("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>&lt;ul&gt;</code> используется для группировки непронумерованных элементов данных, и их последовательность в списке не нужна. Что характерно, неупорядочные списки используют маркеры, которые могут быть разных форм (в форме точки, круга или прямоугольной формы). Стиль задаётся не в HTML, а со связанным с ним CSS,  используя свойство {{ cssxref("list-style-type") }}.</li>
+ <li>Элементы <code>&lt;ul&gt;</code> и {{HTMLElement("ol")}} могут быть вложены на любом уровне. Более того, вложенные списки могут чередоваться между <code>&lt;ol&gt;</code> и <code>&lt;ul&gt;</code> без ограничений.</li>
+ <li>Элементы {{ HTMLElement("ol") }} и <code>&lt;ul&gt;</code> используются для списков. Различие лишь в том, что в элементе {{ HTMLElement("ol") }} порядок имеет значение. Согласно эмпирической закономерности (или правилу большого пальца), чтобы определить, какую маркировку использовать, попробуйте поменять порядок элементов в списке. Если суть списка меняется, то тогда подойдёт элемент {{ HTMLElement("ol") }}, в противном случае используйте <code>&lt;ul&gt;</code>.</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Простой_список">Простой список</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item&lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p>
+
+<h3 id="Вложенный_список">Вложенный список</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item
+  &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
+    &lt;ul&gt;
+      &lt;li&gt;second item first subitem&lt;/li&gt;
+      &lt;li&gt;second item second subitem
+      &lt;!-- Same for the second nested unordered list! --&gt;
+        &lt;ul&gt;
+          &lt;li&gt;second item second subitem first sub-subitem&lt;/li&gt;
+          &lt;li&gt;second item second subitem second sub-subitem&lt;/li&gt;
+          &lt;li&gt;second item second subitem third sub-subitem&lt;/li&gt;
+        &lt;/ul&gt;
+      &lt;/li&gt; &lt;!-- Closing &lt;/li&gt; tag for the li that
+                  contains the third unordered list --&gt;
+      &lt;li&gt;second item third subitem&lt;/li&gt;
+    &lt;/ul&gt;
+  &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
+  &lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;</pre>
+
+<p>Результат HTML кода выше:</p>
+
+<p>{{EmbedLiveSample("Nesting_a_list", 400, 220)}}</p>
+
+<h3 id="Упорядоченный_список_внутри_неупорядоченного_списка">Упорядоченный список внутри неупорядоченного списка</h3>
+
+<pre class="brush: html">&lt;ul&gt;
+  &lt;li&gt;first item&lt;/li&gt;
+  &lt;li&gt;second item
+  &lt;!-- Look, the closing &lt;/li&gt; tag is not placed 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;!-- Here is the closing &lt;/li&gt; tag --&gt;
+  &lt;/li&gt;
+  &lt;li&gt;third item&lt;/li&gt;
+&lt;/ul&gt;
+</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', '&lt;ul&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></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.ul")}}</p>
+
+<h2 id="Смотри_также">Смотри также</h2>
+
+<ul>
+ <li>Остальные списковые HTML элементы: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} и устаревший {{ HTMLElement("dir") }};</li>
+ <li>CSS свойства, которые могут быть полезны для стилизации <code>&lt;ul&gt;</code> элементов:
+  <ul>
+   <li>свойство <a href="/en-US/docs/Web/CSS/list-style">list-style</a>, полезное для выбора способа отображения маркеров,</li>
+   <li><a href="https://wiki.developer.mozilla.org/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>
-- 
cgit v1.2.3-54-g00ecf