<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.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
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
- L'elemento
<figcaption>
.