initial commit

1 files changed, 175 insertions, 0 deletions

diff --git a/files/ru/web/html/element/figure/index.html b/files/ru/web/html/element/figure/index.html
new file mode 100644
index 0000000000..2842179eff
--- /dev/null
+++ b/files/ru/web/html/element/figure/index.html
@@ -0,0 +1,175 @@
+---
+title: '<figure>: Элемент иллюстрации с необязательной подписью'
+slug: Web/HTML/Element/figure
+tags:
+  - Element
+  - HTML
+  - HTML grouping content
+  - Reference
+  - figure
+  - Диаграммы
+  - Иллюстрации
+  - Представление
+  - Элемент
+translation_of: Web/HTML/Element/figure
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML-элемент <code>&lt;figure&gt;</code> (Иллюстрация с необязательной подписью)</strong> представляет самостоятельный контент, часто с подписью (заголовком), которая указывается с помощью элемента ({{HTMLElement("figcaption")}}).</span> Диаграмма и её подпись представляет собой единое целое.</p>
+
+<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>
+
+<div class="hidden">Источник для этого интерактивного пример хранится в GitHub репозитории. Если вы хотите внести свой вклад, ознакомьтесь с <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull request.</div>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
+   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прочие_модели_контента">секционный корень</a>, явный контент</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённое содержимое</th>
+   <td>Элемент {{HTMLElement("figcaption")}} за которым следует <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">основной поток</a>; или поточный контент за которым следует элемент {{HTMLElement("figcaption")}}; или поточный контент.</td>
+  </tr>
+  <tr>
+   <th scope="row">Пропуск тегов</th>
+   <td>{{no_tag_omission}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые родители</th>
+   <td>Любые элементы принимающие <a href="/ru/docs/Web/Guide/HTML/Content_categories#Основной_поток" title="HTML/Content categories#Flow content">основной поток</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Разрешённые ARIA-роли</th>
+   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">DOM-интерфейс</th>
+   <td>{{domxref("HTMLElement")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Атрибуты">Атрибуты</h2>
+
+<p>Этот элемент поддерживает только <a href="/ru/docs/Web/HTML/Общие_атрибуты">глобальные атрибуты</a>.</p>
+
+<h2 id="Примечания_по_использованию">Примечания по использованию</h2>
+
+<ul>
+ <li>Обычно <code>&lt;figure&gt;</code> это рисунок, иллюстрация, диаграмма, фрагмент кода, и т.д., на который ссылаются в основном потоке документа, но может быть перенесен в другую часть документа или в приложение не нарушив основной поток.</li>
+ <li>Являясь <a href="/ru/docs/Web/Guide/HTML/Content_categories#Прочие_модели_контента" title="Sections and Outlines of an HTML5 document#Sectioning root">секционным корнем</a>, структура содержимого элемента <code>&lt;figure&gt;</code> исключается из основной структуры документа.</li>
+ <li>Подпись может быть связана с элементом <code>&lt;figure&gt;</code> с помощью вставки {{HTMLElement("figcaption")}} внутри него (как первый или последний потомок). Первый элемент <code>&lt;figcaption&gt;</code> в иллюстрации предоставляет её подпись (заголовок).</li>
+</ul>
+
+<h2 id="Примеры">Примеры</h2>
+
+<h3 id="Иллюстрации">Иллюстрации</h3>
+
+<pre class="brush: html">&lt;!-- Just an image --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="The beautiful MDN logo."&gt;
+&lt;/figure&gt;
+
+&lt;!-- Image with a caption --&gt;
+&lt;figure&gt;
+  &lt;img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="The beautiful MDN logo."&gt;
+  &lt;figcaption&gt;MDN Logo&lt;/figcaption&gt;
+&lt;/figure&gt;
+</pre>
+
+<div>{{EmbedLiveSample("Иллюстрации", "100%", 375)}}</div>
+
+<h3 id="Фрагменты_кода">Фрагменты кода</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;Get browser details using &lt;code&gt;navigator&lt;/code&gt;.&lt;/figcaption&gt;
+  &lt;pre&gt;
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
+  txt+= "Browser Name: " + navigator.appName + "; ";
+  txt+= "Browser Version: " + navigator.appVersion  + "; ";
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
+  txt+= "Platform: " + navigator.platform  + "; ";
+  txt+= "User-agent header: " + navigator.userAgent  + "; ";
+  console.log("NavigatorExample", txt);
+}
+  &lt;/pre&gt;
+&lt;/figure&gt;</pre>
+
+<div>{{EmbedLiveSample("Фрагменты_кода", "100%", 250)}}</div>
+
+<h3 id="Цитирования">Цитирования</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Edsger Dijkstra:&lt;/cite&gt;&lt;/figcaption&gt;
+  &lt;blockquote&gt;If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.&lt;/blockquote&gt;
+&lt;/figure&gt;
+</pre>
+
+<div>{{EmbedLiveSample("Цитирования")}}</div>
+
+<blockquote>"Если отладка — процесс удаления ошибок, то программирование должно быть процессом их внесения", — Эдсгер Дейкстра.</blockquote>
+
+<h3 id="Стихи">Стихи</h3>
+
+<pre class="brush: html">&lt;figure&gt;
+  &lt;p style="white-space:pre"&gt;
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.&lt;/p&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;,
+    by William Shakespeare&lt;/figcaption&gt;
+&lt;/figure&gt;</pre>
+
+<div>{{EmbedLiveSample("Стихи", "100%", 250)}}</div>
+
+<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-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5.2')}}</td>
+   <td>No changes from HTML 5.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("html.elements.figure")}}</p>
+
+<h2 id="Смотрите_также">Смотрите также</h2>
+
+<ul>
+ <li>Элемент {{HTMLElement("figcaption")}}.</li>
+</ul>