▧ Semantica

Pagina evento

Prepara una pagina evento con data, luogo, programma e informazioni pratiche.

Obiettivo

Descrivere un evento in modo completo usando tag semantici e contenuti facili da scansionare.

Traccia

Prepara una pagina evento con data, luogo, programma e informazioni pratiche.

Requisiti richiesti

  • Usa article per l’evento.
  • Inserisci data e ora con time datetime.
  • Crea una sezione programma con lista ordinata.
  • Aggiungi luogo e link di approfondimento.
Consiglio: prima scrivi il contenuto in modo semplice, poi controlla la gerarchia dei titoli e solo alla fine pensa alla grafica.

Procedura guidata

  1. Crea un nuovo file con nome chiaro, ad esempio 05-pagina-evento.html.
  2. Inserisci la struttura base del documento o lavora dentro il main se il layout è già pronto.
  3. Aggiungi titoli, paragrafi, liste, immagini o form richiesti dalla traccia.
  4. Apri il file nel browser e verifica che i contenuti siano nell’ordine corretto.
  5. Valida il codice e correggi eventuali tag non chiusi o attributi mancanti.

Base di partenza

Il codice seguente non è l’unica soluzione possibile: usalo come riferimento e personalizzalo.

<article>
  <header>
    <h1>Workshop HTML5 dal vivo</h1>
    <p><time datetime="2026-06-15T15:00">15 giugno 2026, ore 15:00</time></p>
  </header>
  <section>
    <h2>Programma</h2>
    <ol>
      <li>Introduzione alla struttura HTML</li>
      <li>Esercizio guidato</li>
      <li>Domande finali</li>
    </ol>
  </section>
  <section>
    <h2>Luogo</h2>
    <p>Aula informatica, Via Roma 10.</p>
  </section>
</article>

Checklist di controllo

  • Semantica: i tag descrivono il ruolo reale dei contenuti.
  • Accessibilità: immagini, form e link sono comprensibili anche fuori dal contesto visivo.
  • Ordine: c’è un solo h1 e i titoli non saltano livello senza motivo.
  • Percorsi: link, immagini e file collegati usano nomi corretti.

Continua gli esercizi

Passa alla traccia precedente o successiva mantenendo lo stesso metodo: struttura, controllo, miglioramento.