Quando usare questo esempio
Utile per promuovere un corso senza mischiare programma, requisiti e iscrizione.
Codice HTML5 commentato
Osserva la struttura e prova a riconoscere il ruolo dei tag prima di copiarla.
<main>
<article>
<header>
<h1>Corso HTML5 per principianti</h1>
<p>Impara a costruire pagine web ordinate partendo da zero.</p>
</header>
<section>
<h2>Obiettivi</h2>
<p>Al termine saprai creare documenti HTML completi e leggibili.</p>
</section>
<section>
<h2>Programma</h2>
<ol>
<li>Struttura base</li>
<li>Testi, immagini e link</li>
<li>Form, tabelle e semantica</li>
</ol>
</section>
<p><a href="iscrizione.html">Iscriviti al corso</a></p>
</article>
</main>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
- Puoi trasformare il programma in una tabella se ci sono date e orari.
- Aggiungi FAQ per chiarire prerequisiti e durata.
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.