Quando usare questo esempio
Le FAQ funzionano bene quando ogni domanda è autonoma e facile da trovare.
Codice HTML5 commentato
Osserva la struttura e prova a riconoscere il ruolo dei tag prima di copiarla.
<main>
<h1>Domande frequenti sul corso HTML5</h1>
<section>
<h2>Serve installare programmi?</h2>
<p>È sufficiente un editor di testo e un browser aggiornato.</p>
</section>
<section>
<h2>Il corso è adatto a principianti?</h2>
<p>Sì, parte dalla struttura base di una pagina.</p>
</section>
<section>
<h2>Si usa anche CSS?</h2>
<p>In questo percorso CSS viene solo collegato; l’approfondimento è nel CSS3-LAB.</p>
</section>
</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
- Trasforma le domande in link interni se la pagina diventa lunga.
- Mantieni risposte brevi e concrete.
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.