figure e figcaption
Racchiudere le immagini in contenitori figure semantici con didascalie
figure e figcaption è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cos'è figure?
L'elemento <figure> contrassegna contenuti autonomi richiamati dal testo principale:
- Immagini con didascalie
- Elenchi di codice
- Diagrammi, grafici e illustrazioni
- Citazioni
La caratteristica fondamentale è che, se viene rimosso dal flusso principale, il testo circostante continua ad avere senso.
figure con figcaption
<figcaption> fornisce una didascalia per la figura:
<figure>
<img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
<figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->Posizione di figcaption
<figcaption> può essere posizionato prima o dopo il contenuto principale:
<figure>
<figcaption>Listing 1: Hello World in HTML</figcaption>
<pre><code><!DOCTYPE html>
<html>
<body>Hello, World!</body>
</html></code></pre>
</figure>Accessibilità: alt vs figcaption
È importante comprendere la differenza:
alt: descrive il contenuto dell'immagine per i lettori di schermo e per le immagini non caricatefigcaption: didascalia visibile che fornisce contesto, fonte o spiegazione
Hanno scopi diversi e non dovrebbero essere duplicati.
<figure>
<img src="chart.png" alt="Line chart showing 45% growth from January to December">
<figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>Elenco di codice in figure
Utilizzi <figure> per esempi di codice con un'etichetta:
<figure>
<pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>Citazione in figure
<figure> funziona molto bene con <blockquote>:
<figure>
<blockquote>
<p>The web is for everyone.</p>
</blockquote>
<figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>Più immagini in figure
Una figura può contenere più immagini correlate:
<figure>
<img src="before.jpg" alt="Garden before renovation">
<img src="after.jpg" alt="Garden after renovation">
<figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>figure vs div
Quando utilizzare <figure> invece di <div>:
- Utilizzi
<figure>quando il contenuto potrebbe essere spostato in un'appendice - Utilizzi
<figure>quando è necessaria una didascalia visibile - Utilizzi
<div>per i contenitori di layout o per gruppi di immagini non autonomi
Collegare le figure nel testo
Faccia riferimento alle figure dal testo principale:
<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>
<figure id="fig1">
<img src="growth.png" alt="Revenue growth chart 2020-2024">
<figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>figure non è obbligatorio per le immagini
Non è necessario racchiudere ogni immagine in <figure>:
<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">
<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
<img src="diagram.svg" alt="System architecture diagram">
<figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>Stilizzare figure e figcaption
CSS comune per le figure:
figure {
margin: 2rem auto;
max-width: 100%;
text-align: center;
}
figcaption {
font-size: 0.875rem;
color: #666;
margin-top: 0.5rem;
font-style: italic;
}Verifica rapida
Qual è la differenza fondamentale tra il testo alt e figcaption?
Riepilogo: figure e figcaption
Elementi essenziali di figure:
<figure>: contenuto autonomo richiamato dal testo principale<figcaption>: didascalia visibile, primo o ultimo figlio di figurealt: descrizione invisibile per i lettori di schermofigcaption: contesto visibile per tutti gli utenti- Funziona per immagini, codice, citazioni e grafici
Domande Frequenti
La lezione «figure e figcaption» è gratuita?
Sì — il testo completo di «figure e figcaption» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «figure e figcaption»?
Racchiudere le immagini in contenitori figure semantici con didascalie Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «figure e figcaption»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- L’elemento img: src, alt, width e height
- Immagini responsive con srcset e sizes
- L’elemento picture per l’art direction
- figure e figcaption