---
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>&lt;figure&gt;</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>&lt;figure&gt;</code> s'exclou de l'esquema principal del document.</li>
 <li>Una llegenda pot ser associada amb l'element <code>&lt;figure&gt;</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">&lt;!-- Just a figure --&gt;
&lt;figure&gt;
  &lt;img src="https://developer.mozilla.org/static/img/favicon144.png" alt="An awesome picture"&gt;
&lt;/figure&gt;
&lt;p&gt;&lt;/p&gt;
&lt;!-- Figure with figcaption --&gt;
&lt;figure&gt;
  &lt;img src="https://developer.mozilla.org/static/img/favicon144.png" alt="An awesome picture"&gt;
  &lt;figcaption&gt;Fig1. MDN Logo&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;&lt;/p&gt;
</pre>


<figure><img alt="MDN Logo" src="https://developer.mozilla.org/static/img/favicon144.png"></figure>

<p> </p>


<figure><img alt="MDN Logo" src="https://developer.mozilla.org/static/img/favicon144.png">
<figcaption>Fig1. MDN Logo</figcaption>
</figure>

<p> </p>

<h3 id="Exemple_2">Exemple 2</h3>

<pre class="brush: html">&lt;figure&gt;
  &lt;figcaption&gt;Get browser details using navigator&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;
}
  &lt;/pre&gt;
&lt;/figure&gt;
</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">&lt;figure&gt;
  &lt;figcaption&gt;&lt;cite&gt;Edsger Dijkstra :-&lt;/cite&gt;&lt;/figcaption&gt;
  &lt;p&gt;"If debugging is the process of removing software bugs, &lt;br /&gt; then programming must be the process of putting them in"&lt;/p&gt;
&lt;/figure&gt;
</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>&lt;figure&gt;</code> es podria utilitzar per al marcatge d'un poema.</p>

<pre class="brush: html">&lt;figure&gt;
 &lt;p&gt;
  Depression is running through my head,&lt;br&gt;
  These thoughts make me think of death,&lt;br&gt;
  A darkness which blanks my mind,&lt;br&gt;
  A walk through the graveyard, what can I find?....
 &lt;/p&gt;
 &lt;figcaption&gt;&lt;cite&gt;Depression&lt;/cite&gt;. By: Darren Harris&lt;/figcaption&gt;
&lt;/figure&gt;</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', '&lt;figure&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </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="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>