▧ Articoli

Articolo blog

Scrivi un articolo HTML5 con titolo, autore, data, sezioni e link correlati.

Obiettivo

Capire come strutturare un contenuto editoriale con `article`, titoli gerarchici e metadati leggibili.

Traccia

Scrivi un articolo HTML5 con titolo, autore, data, sezioni e link correlati.

Requisiti richiesti

  • Usa article come contenitore principale.
  • Nel header inserisci titolo, autore e data.
  • Dividi il testo in almeno tre sezioni.
  • Chiudi con link o risorse correlate.
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 06-articolo-blog.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>Come iniziare con HTML5</h1>
    <p>Di Redazione Web, <time datetime="2026-05-27">27 maggio 2026</time></p>
  </header>
  <section>
    <h2>Perché partire dalla struttura</h2>
    <p>Una buona pagina nasce da contenuti ordinati prima ancora della grafica.</p>
  </section>
  <section>
    <h2>Tag da conoscere</h2>
    <p>Header, main, section, article e footer aiutano a descrivere il ruolo dei blocchi.</p>
  </section>
  <footer>
    <p><a href="lezioni.html">Leggi altre lezioni HTML5</a></p>
  </footer>
</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.