Quando usare questo esempio
Un articolo ben strutturato aiuta lettori, motori di ricerca e strumenti assistivi.
Codice HTML5 commentato
Osserva la struttura e prova a riconoscere il ruolo dei tag prima di copiarla.
<article>
<header>
<h1>5 errori comuni quando si inizia con HTML</h1>
<p>Di Redazione, <time datetime="2026-05-27">27 maggio 2026</time></p>
</header>
<section>
<h2>Usare troppi titoli h1</h2>
<p>Il titolo principale dovrebbe identificare il tema della pagina.</p>
</section>
<section>
<h2>Dimenticare il testo alternativo</h2>
<p>Le immagini informative devono avere un alt descrittivo.</p>
</section>
<footer>
<p>Approfondisci con la lezione sulla validazione HTML.</p>
</footer>
</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 un sommario interno se l’articolo diventa lungo.
- Usa link descrittivi, evitando testi generici come “clicca qui”.
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.