Page 53 - Guida tascabile HTML5

l’errore sarà riconoscibile grazie al punto di domanda o alla visualizzazione del
testo alternativo.

Dettagliare il contenuto: <figure> e <figcaption>

Quando è necessario specificare didascalie o raggruppare immagini è opportuno
ricorrere al tag <figure>. Per meglio comprenderne il valore semantico,

analizziamo subito un blocco di codice di esempio:

<h1>Apogeo Editore</h1>
<p>Apogeo è una casa editrice fondata nel 1989.</p>
<figure>
<img src="logo.png" alt="Apogeo Editore" width="300" height="60">
<figcaption>Il logo della casa editrice Apogeo</figcaption>
</figure>

Il tag <figure> diventa il contenitore ideale per separare i dettagli dell’elemento

multimediale dal resto del contenuto testuale, come titoli e paragrafi di testo.

TERMINOLOGIA L’utilizzo del tag <figure> non è limitato alla descrizione di immagini:
in senso più ampio potete utilizzare questa sintassi per inserire nel flusso del
documento altri elementi aggiuntivi, come per esempio video, grafici, porzioni di
codice sorgente: a livello semantico, infatti, tali contenuti sono affini a un’illustrazione
sulla carta stampata, ma sfruttano le possibilità multimediali messe a disposizione dal
Web.

Tenete in ogni caso presente che non è corretto ricorrere al tag <figure> quando

il contenuto aggiuntivo in questione non è direttamente correlato a quello

principale: per esempio un’immagine pubblicitaria nella barra laterale di una
pagina non è un’illustrazione, ma un contenuto a sé stante.

Interagire con le immagini: <map> e <area>

Già nella specifica HTML4 era incluso il tag <map>, che permette di rendere

interattive le immagini incluse nei documenti, definendo aree capaci di reagire ai

clic.
Prendiamo in considerazione un esempio:

<h1>I quattro punti cardinali</h1>
<img src="bussola.png" alt="Una bussola" usemap="#cardinali">
<map name="cardinali">
<area shape="circle" coords"250,30,5" href="nord.htm" alt="Nord">
<area shape="circle" coords"30,250,5" href="est.htm" alt="Est">
<area shape="circle" coords"470,250,5" href="sud.htm" alt="Sud">
<area shape="circle" coords"250,470,5" href="ovest.htm" alt="Ovest">
</map>