Tag HTML <figure>

Definizione e uso

<figure> l'etichetta definisca contenuti inclusi, come illustrazioni, grafici, foto, elenchi di codice, ecc.

Nonostante <figure> Il contenuto dell'elemento è correlato al contenuto principale, ma la sua posizione è indipendente dal flusso principale del contenuto. Se viene eliminato, non dovrebbe influenzare il flusso del documento.

Suggerimento:Utilizzare l'elemento <figcaption> Per <figure> Aggiungere un titolo all'elemento.

Vedi anche:

Manuale di riferimento HTML DOM:Oggetto Figure

Esempio

Esempio 1

Usare l'elemento <figure> per etichettare le immagini nel documento, e l'elemento <figcaption> per definire il titolo dell'immagine:

<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figura 1 - Trulli della Puglia in Italia.</figcaption>
</figure>

Prova personalmente

Esempio 2

Impostare lo stile di <figure> e <figcaption> utilizzando CSS:

<html>
<head>
<style>
figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin: auto;
}
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
<figure>
  <img src="trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Figura 1 - Trulli della Puglia in Italia.</figcaption>
</figure>
</body>
</html>

Prova personalmente

Proprietà globali

<figure> Il tag supporta anche Proprietà globali in HTML.

Proprietà degli eventi

<figure> Il tag supporta anche Proprietà degli eventi in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <figure> Elemento:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Prova personalmente

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta l'elemento.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 9.0 4.0 5.1 11.0

Nota: Il tag <figure> è una nuova etichetta di HTML 5.