Organizzare i contenuti con HTML5 - figure e figcaption
figure e figcaption
Definizione formale di figure
L'elemento figure rappresenta un insieme di elementi e testo, opzionalmente corredato da una didascalia, indipendente e tipicamente riconoscibile come entità atomica (nell'accezione di inscindibile) all'interno del documento.
Definizione formale di figcaption
L'elemento figcaption rappresenta la didascalia o legenda per il resto del contenuto dell'elemento che ne è parent (contenitore diretto), ossia dell'elemento figure.
Il draft indica tra gli usi consigliati della coppia figure-figcaption: illustrazioni, diagrammi, foto, frammenti di codice; i perfetti candidati sono elementi referenziati dal contenuto principale della pagina, ma che se anche fossero spostati in altre sezioni, ad esempio a lato della pagina stessa, non ne intaccherebbero il significato generale.
L'impiego tipico è il posizionamento e la descrizione di un immagine:
<!doctype html>
<html>
<head>
<style>
body {
font-family: "Tahoma", "Arial", sans-serif;
font-size: 12px;
letter-spacing: 1px;
}
figure {
width: 280px;
height: 380px;
text-align: center;
}
figure img {
padding: 10px;
border: 1px solid #888;
}
</style>
</head>
<body>
<figure>
<img src="bambola.png" alt="bambola">
<figcaption>Operazione alla bambola!</figcaption>
</figure>
</body>
</html>Il risultato su Firefox:
N.B.: Non è obbligatorio indicare una figcaption.
L'elemento figure trova applicazione non solo per le immagini, può essere utilizzato anche per contenere video; ne è consentito l'uso anche con del semplice testo, magari per evidenziare una citazione, come indicato nelle specifiche:
<figure>
<p>Cum in Italiam proficisceretur Caesar, Ser. Galbam cum legione XII ... </p>
<figcaption><cite>Giulio Cesare (incipit Libro III). De bello Gallico, 50 A.C.</cite></figcaption>
</figure>Va inoltre sottolineato come sia possibile inserire più elementi (ad esempio immagini) all'interno di figure, descritti da una unica didascalia:
<figure>
<img src="casa-1.jpg" alt="foto originale"/>
<img src="casa-seppia.jpg" alt="foto virata seppia"/>
<img src="casa_bw.jpg" alt="foto bw"/>
<figcaption>Le immagini mostrano i vari effetti grafici applicabili.</figcaption>
</figure>
