files/ru/web/html/element/figure/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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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>