7.1 Elemento <figure>
L'uso dei tag <figure> e <figcaption> in HTML offre un modo semantico
per aggiungere immagini e altri elementi multimediali con didascalie. Questi tag aiutano a migliorare la struttura del contenuto,
rendendolo più accessibile e comprensibile sia per gli utenti che per i motori di ricerca. Esaminiamo questi elementi più in dettaglio.
L'elemento <figure> viene utilizzato per indicare contenuti autonomi, che illustrano o
spiegano il resto del documento. Può contenere un'immagine, un diagramma, un video, un audio, una tabella o anche un blocco di codice.
Di solito, l'elemento <figure> è usato insieme all'elemento <figcaption>,
che aggiunge una didascalia al contenuto del <figure>.
Sintassi
<figure>
<!-- Qui può esserci qualsiasi elemento multimediale, ad esempio un'immagine -->
</figure>
Esempi di utilizzo:
Esempio 1: Immagine con didascalia
<figure>
<img src="example.jpg" alt="Esempio di immagine">
<figcaption>Didascalia dell'immagine, che spiega il suo contenuto</figcaption>
</figure>
Esempio 2: Tabella con didascalia
<figure>
<table>
<tr>
<th>Titolo 1</th>
<th>Titolo 2</th>
</tr>
<tr>
<td>Dati 1</td>
<td>Dati 2</td>
</tr>
</table>
<figcaption>Didascalia della tabella</figcaption>
</figure>
7.2 Elemento <figcaption>
L'elemento <figcaption> viene usato per aggiungere una didascalia al contenuto dell'elemento
<figure>. Può essere posizionato sia prima del contenuto di <figure>, sia dopo,
a seconda delle preferenze del sviluppatore o dei requisiti di design.
Sintassi
<figure>
<!-- Contenuto dell'elemento figure -->
<figcaption>Didascalia del contenuto</figcaption>
</figure>
Esempi di utilizzo:
Esempio 1: Didascalia dopo l'immagine
<figure>
<img src="landscape.jpg" alt="Paesaggio">
<figcaption>Bellissimo paesaggio con montagne e lago</figcaption>
</figure>
Esempio 2: Didascalia prima dell'immagine
<figure>
<figcaption>Bellissimo paesaggio con montagne e lago</figcaption>
<img src="landscape.jpg" alt="Paesaggio">
</figure>
7.3 Accessibilità e SEO
L'uso degli elementi <figure> e <figcaption> migliora l'accessibilità e SEO
del tuo sito. I programmi di screen reading, usati da persone con disabilità, comprendono meglio il contesto
dell'immagine grazie al tag semantico <figcaption>. Anche i motori di ricerca tengono conto
della struttura del documento HTML, il che aiuta a migliorare l'indicizzazione e il posizionamento della pagina.
Esempi di utilizzo in vari contesti:
Esempio 1: Integrazione di un diagramma
<figure>
<img src="chart.png" alt="Diagramma che mostra la crescita delle vendite">
<figcaption>Diagramma che mostra la crescita delle vendite nell'ultimo trimestre</figcaption>
</figure>
Esempio 2: Contenuto video con didascalia
<figure>
<video controls>
<source src="example.mp4" type="video/mp4">
Il tuo browser non supporta il video.
</video>
<figcaption>Esempio di video che mostra il funzionamento del prodotto</figcaption>
</figure>
Esempio 3: Codice con spiegazione
<figure>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<figcaption>Esempio di funzione in JavaScript che stampa "Hello, world!" nella console</figcaption>
</figure>
7.4 Stile e presentazione con CSS
La stilizzazione degli elementi <figure> e <figcaption> tramite CSS consente di creare
un design visivo accattivante e migliorare la percezione del contenuto.
Esempio con stili applicati:
figure {
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
text-align: center;
}
figcaption {
font-style: italic;
color: #555;
margin-top: 10px;
}
<figure>
<img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
<figcaption>Bellissimo vista sulla natura</figcaption>
</figure>
<figure>
<img src="nature.jpg" alt="Natura">
<figcaption>Bellissimo vista sulla natura</figcaption>
</figure>
L'uso degli elementi <figure> e <figcaption> fornisce un modo semantico
e strutturato per aggiungere contenuti multimediali con didascalie alle pagine web. Questi elementi non solo
migliorano l'accessibilità e il SEO, ma rendono anche il contenuto più comprensibile e strutturato per gli utenti.
GO TO FULL VERSION