---
title: <figure>
slug: Web/HTML/Element/figura
tags:
  - Element
  - Image
  - Information
  - Presentation
  - Reference
translation_of: Web/HTML/Element/figure
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">L'elemento <strong>HTML <code>&lt;figure&gt;</code> </strong>rappresenta un contenuto indipendente che può avere una descrizione tramite l'elemento ({{HTMLElement("figcaption")}}).</span> L'immagine, la descrizione e il suo contenuto hanno riferimenti indipendenti.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>

<div class="hidden">I sorgenti degli esempi di seguito sono pubblicati su un repository GitHub. Nel caso volessi contribuire, puoi clonare il seguente progetto <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e inviarci una pull request.</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto">Categorie di contenuti</a></th>
   <td><a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">Contenuti di flusso</a>, <a href="https://developer.mozilla.org/it/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">sezioni e struttura</a></td>
  </tr>
  <tr>
   <th scope="row">Contenuti permessi</th>
   <td>L'elemento {{HTMLElement("figcaption")}}, seguito da <a href="https://developer.mozilla.org/it/docs/Web/Guide/HTML/Categorie_di_contenuto#Contenuto_di_flusso">contenuti di flusso</a>; o contenuti di flusso seguiti dall'elemento {{HTMLElement("figcaption")}}; o contenuti di flusso.</td>
  </tr>
  <tr>
   <th scope="row">Omissione del tag</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Genitori permessi</th>
   <td>
    <p>Qualsiasi elemento che accetti <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contenuti di flusso</a>.</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Ruoli ARIA permessi</th>
   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">Interfaccia DOM</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributi">Attributi</h2>

<p>Questo elemento include gli <a href="https://developer.mozilla.org/it/docs/Web/HTML/Global_attributes">attributi globali</a>.</p>

<h2 id="Note_sullutilizzo">Note sull'utilizzo</h2>

<ul>
 <li>Solitamente l'elemento <code>&lt;figure&gt;</code> è un'immagine, un'illustrazione, un diagramma, un frammento di codice, etc., relativo al flusso principale di un documento, ma che può essere posizionato in un'altra parte del documento o all'appendice senza impatti sul flusso principale.</li>
 <li>Può essere associata una descrizione all'elemento <code>&lt;figure&gt;</code> inserendo l'elemento {{HTMLElement("figcaption")}} al suo interno (sia come primo che come ultimo figlio). Il primo elemento <code>&lt;figcaption&gt;</code> trovato sarà utilizzato come descrizione.</li>
</ul>

<h2 id="Esempi">Esempi</h2>

<h3 id="Immagini">Immagini</h3>

<pre class="brush: html">&lt;!-- Solo un'immagine --&gt;
&lt;figure&gt;
  &lt;img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="Il bellissimo logo MDN."&gt;
&lt;/figure&gt;

&lt;!-- Un'immagine con descrizione --&gt;
&lt;figure&gt;
  &lt;img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="Il bellissimo logo MDN."&gt;
  &lt;figcaption&gt;MDN Logo&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>

<div>{{EmbedLiveSample("Immagini", "100%", 375)}}</div>

<h3 id="Frammenti_di_codice">Frammenti di codice</h3>

<pre class="brush: html">&lt;figure&gt;
  &lt;figcaption&gt;Ottieni dettagli sul browser utilizzando &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("Frammenti_di_codice", "100%", 250)}}</div>

<h3 id="Citazioni">Citazioni</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("Citazioni")}}</div>

<h3 id="Poemi">Poemi</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("Poemi", "100%", 250)}}</div>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</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>Nessun cambiamento da 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="Compatibilità_dei_browser">Compatibilità dei browser</h2>

<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("html.elements.figure")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>L'elemento {{HTMLElement("figcaption")}}.</li>
</ul>