Quando usare questo esempio
Una scheda prodotto deve separare le informazioni essenziali dalle caratteristiche tecniche.
Codice HTML5 commentato
Osserva la struttura e prova a riconoscere il ruolo dei tag prima di copiarla.
<article>
<header>
<h1>Zaino Urban 20L</h1>
<p>Zaino leggero per lavoro, università e piccoli spostamenti.</p>
</header>
<figure>
<img src="img/zaino-urban.jpg" alt="Zaino Urban nero con tasca frontale">
<figcaption>Modello Urban 20L colore nero.</figcaption>
</figure>
<section>
<h2>Caratteristiche</h2>
<ul>
<li>Capienza 20 litri</li>
<li>Tasca per notebook da 15 pollici</li>
<li>Schienale imbottito</li>
</ul>
</section>
<p><strong>Prezzo:</strong> 49,00 €</p>
</article>Commento didattico
La pagina è organizzata in blocchi riconoscibili: un contenitore principale, titoli ordinati e contenuti raggruppati per argomento. Questo permette di applicare il CSS senza dover riscrivere la struttura HTML.
Gli elementi semantici non servono a “colorare” la pagina: aiutano a spiegare che cosa rappresenta ogni parte del documento.
Da ricordare: se un blocco ha un significato autonomo, valuta
article; se è solo una sezione tematica della pagina, usa section.Varianti possibili
- Aggiungi una tabella tecnica solo se i dati sono numerosi.
- Inserisci un link alla pagina contatti o acquisto.
Come trasformarlo in esercizio
Cambia il tema, sostituisci i contenuti fittizi con contenuti reali e aggiungi almeno un controllo di accessibilità: testi alternativi, label o link descrittivi.
Continua gli esempi
Confronta questo modello con gli altri esempi e prova a combinarne le parti utili.