Organizzare un itinerario di viaggio con le liste HTML

Introduzione

Le liste HTML non servono soltanto per mostrare semplici elenchi. Usate correttamente, permettono di rappresentare la struttura logica di un itinerario: l’ordine delle tappe, le attività previste in ogni luogo e le informazioni descrittive associate a ciascuna giornata.

In questo tutorial realizzeremo una pagina dedicata a un viaggio di tre giorni. Utilizzeremo:

<ol> per le tappe che devono essere seguite in una sequenza precisa;
<ul> per attività, oggetti o servizi senza un ordine obbligatorio;
<dl>, insieme a <dt> e <dd>, per associare termini e descrizioni, come orari, costi e durate.

Questa distinzione migliora la semantica del documento. Un browser, un motore di ricerca o uno screen reader possono infatti comprendere meglio il significato dei contenuti rispetto a una serie di semplici paragrafi.

Codice completo

<h1>Itinerario di tre giorni a Firenze</h1>

<p>
  Un percorso culturale organizzato per tappe, attività e informazioni utili.
</p>

<h2>Tappe principali</h2>

<ol>
  <li>
    <strong>Giorno 1: Centro storico</strong>

    <ul>
      <li>Visita al Duomo e al Battistero</li>
      <li>Passeggiata in Piazza della Signoria</li>
      <li>Cena in una trattoria locale</li>
    </ul>

    <dl>
      <dt>Orario consigliato</dt>
      <dd>Dalle 9:00 alle 20:00</dd>

      <dt>Durata stimata</dt>
      <dd>Una giornata intera</dd>
    </dl>
  </li>

  <li>
    <strong>Giorno 2: Musei e panorami</strong>

    <ul>
      <li>Ingresso alla Galleria degli Uffizi</li>
      <li>Pausa pranzo nel quartiere di Santa Croce</li>
      <li>Tramonto dal Piazzale Michelangelo</li>
    </ul>

    <dl>
      <dt>Prenotazione</dt>
      <dd>Consigliata per la Galleria degli Uffizi</dd>

      <dt>Trasporto</dt>
      <dd>Percorso a piedi e autobus urbano</dd>
    </dl>
  </li>

  <li>
    <strong>Giorno 3: Oltrarno</strong>

    <ul>
      <li>Visita a Palazzo Pitti</li>
      <li>Esplorazione del Giardino di Boboli</li>
      <li>Acquisto di prodotti artigianali</li>
    </ul>

    <dl>
      <dt>Ritrovo</dt>
      <dd>Ingresso di Palazzo Pitti alle 10:00</dd>

      <dt>Costo previsto</dt>
      <dd>Circa 35 euro a persona</dd>
    </dl>
  </li>
</ol>

<h2>Cosa portare</h2>

<ul>
  <li>Scarpe comode</li>
  <li>Borraccia riutilizzabile</li>
  <li>Documento di identità</li>
  <li>Biglietti delle attrazioni prenotate</li>
</ul>

Spiegazione

La lista ordinata per le tappe

Il tag <ol> rappresenta una lista ordinata. Nel nostro esempio le giornate sono elencate secondo la sequenza del viaggio: prima il centro storico, poi i musei e infine il quartiere di Oltrarno.

Ogni elemento deve essere inserito in un tag <li>. È possibile inserire altri elementi all’interno di un elemento della lista, comprese liste annidate. La lista non ordinata delle attività appartiene infatti alla relativa giornata.

Se fosse necessario iniziare da un numero diverso, si potrebbe usare l’attributo start:

<ol start="4">
  <li>Giorno 4: Escursione fuori città</li>
</ol>

In genere è preferibile non usare type per modificare l’aspetto dei numeri. La presentazione dovrebbe essere gestita dal CSS, mentre l’HTML dovrebbe concentrarsi sul significato dei contenuti.

La lista non ordinata per le attività

Il tag <ul> indica una lista in cui la posizione degli elementi non cambia il loro significato. Le attività del primo giorno, per esempio, possono essere presentate come punti elenco perché appartengono alla tappa, ma non costituiscono necessariamente una sequenza rigida.

Una lista non ordinata è adatta anche a:

materiale da preparare;
servizi disponibili;
alternative di trasporto;
attività facoltative.

La lista di definizione per i dettagli

Il tag <dl> contiene una o più coppie formate da <dt> e <dd>. Il primo rappresenta il termine o l’etichetta, mentre il secondo contiene la relativa descrizione.

Nel codice, “Orario consigliato” è il termine e “Dalle 9:00 alle 20:00” è il suo valore. Questo modello è utile quando i dati sono organizzati come coppie chiave-valore.

<dl>
  <dt>Punto di partenza</dt>
  <dd>Stazione ferroviaria centrale</dd>

  <dt>Durata del percorso</dt>
  <dd>Tre giorni e due notti</dd>
</dl>

Non bisogna usare <dl> soltanto per ottenere un particolare layout visivo. È corretto usarlo quando esiste una relazione reale tra un’etichetta e la sua descrizione.

Best practice

Scegli il tipo di lista in base al significato: usa <ol> per sequenze, <ul> per gruppi senza ordine e <dl> per coppie di informazioni.
Non creare liste con paragrafi e trattini: i simboli inseriti manualmente non comunicano la stessa struttura semantica.
Mantieni una gerarchia coerente: una lista di attività dovrebbe essere contenuta nella relativa tappa, non separata casualmente dal contesto.
Non abusare delle liste annidate: troppi livelli rendono la lettura più difficile, soprattutto con tecnologie assistive.
Usa titoli descrittivi: un’intestazione come “Tappe principali” chiarisce subito il contenuto della lista.
Non usare l’HTML per la sola grafica: l’aspetto dei numeri, dei punti elenco e degli spazi deve essere personalizzato con CSS.
Scrivi elementi concisi: ogni <li> dovrebbe esprimere un’attività, una tappa o un’informazione ben definita.
Considera l’accessibilità: evita di comunicare l’ordine usando soltanto colori o icone; i numeri dell’elemento <ol> devono restare comprensibili.

Riepilogo

Le liste HTML permettono di trasformare un itinerario in una struttura chiara e semanticamente corretta. L’elemento <ol> rappresenta la sequenza delle tappe, <ul> raccoglie le attività senza ordine obbligatorio e <dl> organizza dettagli formati da etichette e descrizioni.

La combinazione di questi tre strumenti consente di creare contenuti più leggibili, accessibili e facili da modificare. Prima di scrivere il markup, chiediti sempre quale relazione esiste tra gli elementi: ordine, appartenenza oppure associazione tra un termine e il suo valore.

Approfondisci con risorse ufficiali

Per consultare la documentazione ufficiale e gli esempi aggiornati, puoi approfondire questi riferimenti:

MDN Web Docs, elemento <ol>: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol
MDN Web Docs, elemento <ul>: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul
MDN Web Docs, elemento <dl>: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl
WHATWG HTML Standard, sezione sulle liste: html.spec.whatwg.org

Add as preferred source on Google