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
184
185
186
187
188
189
190
191
192
193
|
---
title: <figure>
slug: Web/HTML/Element/figura
translation_of: Web/HTML/Element/figure
---
<h2 id="Resumo">Resumo</h2>
<p>O <strong>Elemento HTML <code><figure></code> </strong>representa o conteúdo independente, frequentemente com uma legenda ({{HTMLElement("figcaption")}})<em><code>,</code></em> e é normalmente referido como uma única unidade. Enquanto ela está relacionada com o fluxo principal, sua posição é independente do fluxo principal.Normalmente, isso é uma imagem, uma ilustração, um diagrama, um trecho de código ou uma esquema que é referenciado no texto principal, mas que pode ser movido para outra página ou para um apêndice, sem afetar o fluxo principal.</p>
<div class="note">
<p><em>Notas de uso: </em></p>
<ul>
<li>Being a <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root" title="Sections and Outlines of an HTML5 document#Sectioning root">sectioning root</a>, the outline of the content of the <span style="font-family: courier new;"><figure> </span>element is excluded from the main outline of the document.</li>
<li>Uma legenda pode ser associada com o elemento <code><figure></code> inserindo o elemento {{HTMLElement("figcaption")}} dentro dele (no inicio ou no fim).</li>
</ul>
</div>
<ul class="htmlelt">
<li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root" title="Sections and Outlines of an HTML5 document#Sectioning root">sectioning root</a>, palpable content.</li>
<li><dfn>Permite conteúdo</dfn><dfn>A {{HTMLElement("figcaption")}} element, followed by <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">flow content</a>; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content</dfn>.</li>
<li><dfn>Omissão de TAGs</dfn> {{no_tag_omission}}</li>
<li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>.</li>
<li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
</ul>
<h2 id="Atributos">Atributos</h2>
<p><span style="line-height: 1.5;">Este elemento só inclui os</span><span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributos globais</a><span style="line-height: 21px;">.</span></p>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Exemplo_1">Exemplo 1</h3>
<pre class="brush: html"><!-- Apenas uma imagem-->
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
</figure>
<p></p>
<!-- Imagem com legenda -->
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="Uma imagem impressionante">
<figcaption>Legenda para a imagem impressionante</figcaption>
</figure>
<p></p>
</pre>
<figure><img alt="MDN Logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"></figure>
<p> </p>
<figure><img alt="MDN Logo" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png">
<figcaption>
<p>Imagem1. MDN Logo</p>
</figcaption>
</figure>
<p> </p>
<h3 id="Example_2">Example 2</h3>
<pre class="brush: html"> <figure>
<figcaption>Obtenha os detalhes do browser usando navigator</figcaption>
<pre>
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;
}
</pre>
</pre>
<figure>
<figcaption>
<p>Obtenha os detalhes do browser usando navigator</p>
</figcaption>
<pre> 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;
}
</pre>
</figure>
<h3 id="Exemplo_3">Exemplo 3</h3>
<pre class="brush: html"><figure>
<figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
<p>"Se o debugging é o processo de remoção de bugs de software, <br /> então programação deve ser o processo de colocá-los"<br /></p>
</figure>
</pre>
<figure>
<figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
<p>"Se o debugging é o processo de remoção de bugs de software, <br>
<span style="line-height: 1.5;">então programação deve ser o processo de colocá-los</span><span style="line-height: 1.5;">"</span></p>
</figure>
<h2 id="Specifications" name="Specifications">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-figure-element', '<figure>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Navegadores_compatíveis">Navegadores compatíveis</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>8</td>
<td>{{CompatGeckoDesktop("2.0")}}</td>
<td>9.0</td>
<td>11.10</td>
<td>5.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>3.0</td>
<td>{{CompatGeckoMobile("2.0")}}</td>
<td>9.0</td>
<td>11.0</td>
<td>5.1 (iOS 5.0)</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_Também">Veja Também</h2>
<ul>
<li>O {{HTMLElement("figcaption")}} elemento.</li>
</ul>
<div>{{HTMLRef}}</div>
|
