<figure>: l'elemento "figura" con didascalia opzionale

L' elemento HTML <figure> rappresenta contenuto autonomo, potenzialmente con una didascalia facoltativa, che viene specificato utilizzando l'elemento <figcaption>. La figura, la sua didascalia e il suo contenuto sono indicati come una singola unità.

Note d'uso

Solitamente <figure> è un'immagine, un'illustrazione, un diagramma, un frammento di codice, ecc., a cui si fa riferimento nel flusso principale di un documento, ma che può essere spostato in un'altra parte del documento o in un'appendice senza influire sul flusso principale.
Essendo una "radice di sezionamento" , il profilo del contenuto dell'elemento <figure> è escluso dal profilo principale del documento.
Una didascalia può essere associata all'elemento <figure> inserendo al suo interno una didascalia con <figcaption> (come primo o ultimo figlio). Il primo elemento <figcaption> che si trova nella figura è presentato come didascalia della figura.

Esempi

Immagini

<!-- Solo un'immagine -->
<figure>
  <img
  src="immagine.png"
  alt="Descrizione dell'immagine">
</figure>

<!-- Immagine con una didascalia -->
<figure>
  <img
  src="immagine.png"
  alt="Descrizione dell'immagine">
  <figcaption>Didascalia a caso </figcaption>
</figure>

Frammenti di codice

<figure>
  <figcaption>Ottieni i dettagli del 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+ = "User-agent header: " + navigator.userAgent + "; " ;
    console.log("NavigatorExample", txt);
  }
  </pre>
</figure>

Citazioni

<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>Se il debug è il processo di rimozione dei bug del software,
  allora la programmazione deve essere il processo di inserimento.</blockquote>
</figure>

Poesie

<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 dishevelled 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>

Indice

HTML

Attributi