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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
|
---
title: <figure>
slug: Web/HTML/Element/figure
tags:
- Element
- HTML
- HTML grouping content
- Reference
translation_of: Web/HTML/Element/figure
---
<p>{{HTMLRef}}</p>
<p><strong>L'element HTML <code><figure></code></strong> representa un contingut autònom, sovint amb una llegenda ({{HTMLElement("figcaption")}}), i normalment es fa referència com una sola unitat. Si bé es relaciona amb el flux principal, la seva posició és independent del corrent principal. Normalment això és una imatge, una il·lustració, un diagrama, un fragment de codi o un esquema que es fa referència en el text principal, però que es poden moure a una altra pàgina o un apèndix sense afectar el flux principal.</p>
<div class="note"><strong>Notes d'ùs: </strong>
<ul>
<li>Sent una <a href="https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root">arrel de seccionament</a>, el contorn del contingut de l'element <code><figure></code> s'exclou de l'esquema principal del document.</li>
<li>Una llegenda pot ser associada amb l'element <code><figure></code> introduint dins d'aquest un {{HTMLElement("figcaption")}} (com el primer o l'últim fill).</li>
</ul>
</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Categories de contingut</a></th>
<td><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Contingut dinàmic</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">seccionament arrel</a>, contigut palpable.</td>
</tr>
<tr>
<th scope="row">Permitted content</th>
<td>Un element {{HTMLElement("figcaption")}}, seguit per <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">contingut dinàmic</a>; or contingut dinàmic seguit per un element {{HTMLElement("figcaption")}}; o contingut dinàmic.</td>
</tr>
<tr>
<th scope="row">Tag omission</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Permitted parent elements</th>
<td>Qualsevol element que accepti<a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content"> contingut dinàmic.</a></td>
</tr>
<tr>
<th scope="row">DOM interface</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Atributs">Atributs</h2>
<p>Aquest element només inclou els<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">atributs globals</a><span style="line-height: 21px;">.</span></p>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_1">Exemple 1</h3>
<pre class="brush: html"><!-- Just a figure -->
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
</figure>
<p></p>
<!-- Figure with figcaption -->
<figure>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption>Fig1. MDN Logo</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>Fig1. MDN Logo</figcaption>
</figure>
<p> </p>
<h3 id="Exemple_2">Exemple 2</h3>
<pre class="brush: html"><figure>
<figcaption>Get browser details using 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>
</figure>
</pre>
<figure>
<figcaption><span id="result_box" lang="ca"><span>Obtenir informació</span> <span>del navegador utilitzant</span></span> navigator</figcaption>
<pre class="brush: js">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="Exemple_3">Exemple 3</h3>
<pre class="brush: html"><figure>
<figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
<p>"If debugging is the process of removing software bugs, <br /> then programming must be the process of putting them in"</p>
</figure>
</pre>
<figure>
<figcaption><cite>Edsger Dijkstra :-</cite></figcaption>
<p>"Si la depuració és el procés d'eliminació d'errors del programari, la programació ha de ser el procés de posada en"</p>
<h3 id="Exemple_4">Exemple 4</h3>
<p>L'element <code><figure></code> es podria utilitzar per al marcatge d'un poema.</p>
<pre class="brush: html"><figure>
<p>
Depression is running through my head,<br>
These thoughts make me think of death,<br>
A darkness which blanks my mind,<br>
A walk through the graveyard, what can I find?....
</p>
<figcaption><cite>Depression</cite>. By: Darren Harris</figcaption>
</figure></pre>
</figure>
<h2 id="Specifications" name="Specifications">Especificacions</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificació</th>
<th scope="col">Estat</th>
<th scope="col">Comentari</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.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="Navegadors_compatibles">Navegadors compatibles</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suport bàsic</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>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suport bàsic</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="Veure">Veure</h2>
<ul>
<li>L'element {{HTMLElement("figcaption")}}.</li>
</ul>
|
