Le figure

Il tag <img src="..." alt="..." /> consente di inserire un immagine con un testo alternativo, che, però, non è direttamente visibile sulla pagina. Per inserire una didascalia si potrebbe pensare di mettere un paragrafo separato, ma non sarebbe molto bello esteticamente. Il tag <figure> ci consente di fare tutto questo in un unico luogo:

<figure>
    <img src="cane.jpg" alt="Immagine di un cane" />  
    <figcaption>Un cane di razza Shih-Tzu</figcaption>  
</figure>

Un cane di razza Shih-Tzu

Il tag <figure> ha due sotto-elementi: * L'immagine con il tag img * La didascalia nel tag <figcaption>

Attenzione alla differenza tra una figura (<figure>) e una immagine (<img>) con un paragrafo dopo per didascalia:

Le differenze sono sottili, ma ben distinguibili. La figure (a sinistra) infatti: * lascia una riga vuota prima della immagine e dopo la didascalia (figcaption) * mette la didascalia subito dopo l'immagine senza lasciare spazi tra le due Invece, con il solo tag img (a destra): * Il tag img non lascia spazi né prima né dopo l'immagine (ATTENZIONE: mettere qualsiasi tag dopo img significa metterlo effettivamente a FIANCO dell'immagine!) * Di conseguenza, per mettere una didascalia (con il tag <p>) bisogna impiegare il tag <br> per andare a scrivere sotto l'immagine * Visto che il tag <p> invece lascia uno spazio vuoto prima e dopo il testo del paragrafo, tra l'immagine e il paragrafo è più marcata la separazione rispetto che all'interno della figure

Codice (dell'immagine a destra):

<p>Paragrafo</p>
<img src="cane.jpg" alt="Immagine di un cane" width="400" height="300"/>  
<p>Un cane di razza Shih-Tzu</p>
<p>Paragrafo</p>

s Per concludere, il tag figure ha quindi l'effetto di fare rientrare (spostare) leggermente verso destra l'immagine rispetto al testo.