Quando usare questo esempio
L’elemento `time` rende data e ora più chiare anche a software e motori di ricerca.
Codice HTML5 commentato
Osserva la struttura e prova a riconoscere il ruolo dei tag prima di copiarla.
<article>
<header>
<h1>Seminario introduttivo a HTML5</h1>
<p><time datetime="2026-06-20T10:00">20 giugno 2026, ore 10:00</time></p>
</header>
<section>
<h2>Programma</h2>
<ul>
<li>Introduzione al linguaggio HTML</li>
<li>Esempi guidati</li>
<li>Domande e risposte</li>
</ul>
</section>
<section>
<h2>Dove</h2>
<p>Online, con link inviato dopo l’iscrizione.</p>
</section>
</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 form di iscrizione in una pagina separata.
- Inserisci una mappa solo se aggiunge davvero informazioni.
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.