Tag HTML <figure>
Il tag <figure> include immagini, diagrammi, illustrazioni ecc. Descrizione del tag, attributi ed esempi.
Il tag <figure> contrassegna contenuti autonomi — un'unità referenziata dal flusso principale del documento ma completa di per sé. Solitamente contiene un'immagine, ma può ugualmente racchiudere un diagramma, un'illustrazione, un listato di codice, una citazione o una tabella.
Il tag <figure> è uno degli elementi HTML5.
Cosa significa "contenuto autonomo"
Un contenuto è "autonomo" quando può essere spostato altrove — in una barra laterale, in un'appendice o nella pagina successiva — senza modificare il significato del testo circostante. Il corpo del testo potrebbe dire "vedi la figura seguente", ma la figura stessa non deve trovarsi esattamente in quel punto per avere senso.
Questa è la ragione principale per preferire <figure> a un semplice <img>:
- Semantica, non solo layout.
<figure>comunica al browser e alle tecnologie assistive "questa è un'illustrazione autonoma referenziata," mentre un semplice<img>è solo un'immagine inline nel testo. - Raggruppa il contenuto con la sua didascalia. Un
<figure>collega un'immagine (o un codice, o una citazione) alla sua descrizione, così viaggiano insieme come un unico blocco logico. - Gestione degli screen reader. Molti screen reader annunciano un
<figure>come una regione distinta e leggono il suo<figcaption>come etichetta della figura, in modo che gli utenti sentano la spiegazione direttamente collegata all'elemento visivo.
Se un'immagine è puramente decorativa o scorre inline come parte di una frase, un semplice <img> va bene — usa <figure> quando il contenuto è un'unità referenziata e con didascalia.
Aggiungere una didascalia con <figcaption>
Per etichettare o spiegare la figura, annida un elemento <figcaption> all'interno di <figure>. Deve essere il primo o l'ultimo figlio del <figure> — primo per visualizzare la didascalia sopra il contenuto, ultimo per visualizzarla sotto.
Un <figure> può contenere al massimo un <figcaption>.
Sintassi
Il tag <figure> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<figure>) e quello di chiusura (</figure>).
Esempio: <figure> con <figcaption>
Questo è l'utilizzo più comune — un'immagine abbinata a una didascalia:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The Eiffel Tower at sunset (see Figure 1).</p>
<figure>
<img
src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"
alt="The Eiffel Tower silhouetted against an orange sky"
width="250"
height="200"
/>
<figcaption>Figure 1. The Eiffel Tower at sunset.</figcaption>
</figure>
</body>
</html>Esempio: un listato di codice
Un <figure> è un contenitore naturale per un campione di codice referenziato. La didascalia può denominare il listato:
<figure>
<figcaption>Listing 1. A minimal HTML page.</figcaption>
<pre><code><!DOCTYPE html>
<html>
<head><title>Hello</title></head>
<body>Hello, world!</body>
</html></code></pre>
</figure>Vedi <pre> e <code> per la formattazione del codice.
Esempio: una citazione
Una citazione evidenziata che viene referenziata dal testo può essere una figura, con la fonte nella didascalia:
<figure>
<blockquote>
<p>The only way to do great work is to love what you do.</p>
</blockquote>
<figcaption>— Steve Jobs</figcaption>
</figure>Vedi <blockquote> per contrassegnare le citazioni.
Esempio: una tabella
Anche i dati tabulari referenziati come figura possono essere racchiusi in questo tag:
<figure>
<figcaption>Table 1. Browser market share.</figcaption>
<table>
<tr><th>Browser</th><th>Share</th></tr>
<tr><td>Chrome</td><td>65%</td></tr>
<tr><td>Safari</td><td>19%</td></tr>
</table>
</figure>Vedi <table> per costruire tabelle.
La differenza tra <figure> e <aside>
Entrambi gli elementi raggruppano contenuti correlati, ma rispondono a domande diverse.
<figure>contiene contenuti che fanno parte del flusso principale — il documento vi fa riferimento ("come mostrato nella Figura 1"). Rimuoverlo lascerebbe un riferimento senza destinazione. Usalo per immagini, diagrammi, listati di codice e citazioni a cui il testo punta.<aside>contiene contenuti tangenziali — barre laterali, link correlati, citazioni evidenziate o banner pubblicitari. Il testo principale si legge perfettamente anche se l'aside viene rimosso, perché nessuna parte del corpo vi fa riferimento.
Contrasto concreto: un diagramma con didascalia "Figura 2: ciclo di vita della richiesta" di cui l'articolo parla è un <figure>. Un riquadro "Articoli correlati" accanto allo stesso paragrafo è un <aside>.
Accessibilità
<figure>ha un ruolo ARIA implicitofigure; non è necessario aggiungere manualmenterole="figure".- Quando presente, un
<figcaption>visibile funge da nome accessibile (etichetta) della figura, in modo che gli utenti di screen reader ricevano la spiegazione collegata al contenuto. Preferisci un vero<figcaption>rispetto adaria-labelaffinché gli utenti vedenti e non vedenti leggano lo stesso testo. - Per le immagini, il testo
altdi<img>e il<figcaption>hanno scopi diversi:altdescrive l'immagine agli utenti che non possono vederla, mentre la didascalia aggiunge contesto per tutti. Evita di ripetere esattamente le stesse parole in entrambi.
Attributi
Il tag <figure> supporta gli Attributi Globali e gli Attributi Evento.