<figure>

L'elemento HTML <figure> rappresenta un contenuto indipendente che può avere una descrizione tramite l'elemento (<figcaption>). L'immagine, la descrizione e il suo contenuto hanno riferimenti indipendenti.

Categorie di contenuti Contenuti di flusso, sezioni e struttura
Contenuti permessi L'elemento <figcaption>, seguito da contenuti di flusso; o contenuti di flusso seguiti dall'elemento <figcaption>; o contenuti di flusso.
Omissione del tag Nessuna, sia il tag di apertura che quello di chiusura sono obbligatori.
Genitori permessi

Qualsiasi elemento che accetti Contenuti di flusso.

Ruoli ARIA permessi group, presentation
Interfaccia DOM HTMLElement

Attributi

Questo elemento include gli attributi globali.

Note sull'utilizzo

  • Solitamente l'elemento <figure> è 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.
  • Può essere associata una descrizione all'elemento <figure> inserendo l'elemento <figcaption> al suo interno (sia come primo che come ultimo figlio). Il primo elemento <figcaption> trovato sarà utilizzato come descrizione.

Esempi

Immagini

<!-- Solo un'immagine -->
<figure>
  <img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="Il bellissimo logo MDN.">
</figure>

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

Frammenti di codice

<figure>
  <figcaption>Ottieni dettagli sul browser utilizzando <code>navigator</code>.</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  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>

Citazioni

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>

Poemi

<figure>
  <p style="white-space:pre">
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.</p>
  <figcaption><cite>Venus and Adonis</cite>,
    by William Shakespeare</figcaption>
</figure>

Specifiche

Specification Status Comment
HTML Living Standard
The definition of '<figure>' in that specification.
Living Standard
HTML 5.2
The definition of '<figure>' in that specification.
Recommendation Nessun cambiamento da HTML 5.0.
HTML5
The definition of '<figure>' in that specification.
Recommendation

Compatibilità dei browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
figureChrome Full support 8Edge Full support YesFirefox Full support 4IE Full support 9Opera Full support 11Safari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5.1Samsung Internet Android Full support Yes

Legend

Full support  
Full support

See also