<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

BCD tables only load in the browser

See also