Liste HTML per Presentare un Catalogo di Prodotti Accessibile

Introduzione

Le liste HTML non servono soltanto per creare elenchi generici. Usate correttamente, permettono di organizzare cataloghi, schede prodotto e informazioni tecniche in modo chiaro, semantico e facilmente interpretabile anche dai lettori di schermo. In questo tutorial realizzeremo una semplice scheda per un prodotto tecnologico, usando contemporaneamente liste non ordinate, ordinate e di definizione.

Lo scenario è quello di un piccolo catalogo online. Ogni prodotto può avere:

• un insieme di caratteristiche principali;
• una sequenza di operazioni per configurarlo;
• un elenco di termini tecnici con relative descrizioni.

La scelta del tipo di lista deve dipendere dal significato dei dati, non dal loro aspetto grafico. Una lista non ordinata rappresenta elementi senza una sequenza precisa. Una lista ordinata rappresenta elementi in cui l’ordine è importante. Una lista di definizione collega invece un termine a una descrizione, ed è ideale per specifiche e proprietà di un prodotto.

Codice completo

<h1>Aurora Hub Mini</h1>

<p>
  Hub USB-C compatto per collegare periferiche, monitor e schede di memoria
  a un computer portatile.
</p>

<h2>Caratteristiche principali</h2>

<ul>
  <li>Tre porte USB-A per tastiera, mouse e dispositivi esterni.</li>
  <li>Una porta HDMI con supporto alla risoluzione 4K.</li>
  <li>Lettore integrato per schede SD e microSD.</li>
  <li>Struttura in alluminio riciclato.</li>
</ul>

<h2>Configurazione iniziale</h2>

<ol>
  <li>Collega il connettore USB-C alla porta compatibile del computer.</li>
  <li>Inserisci il cavo HDMI se desideri utilizzare un monitor esterno.</li>
  <li>Collega le periferiche alle porte disponibili dell’hub.</li>
  <li>Verifica che il sistema operativo riconosca tutti i dispositivi.</li>
</ol>

<h2>Specifiche tecniche</h2>

<dl>
  <dt>Interfaccia principale</dt>
  <dd>USB-C con trasferimento dati e alimentazione.</dd>

  <dt>Uscita video</dt>
  <dd>HDMI 2.0 fino a 3840 × 2160 pixel a 60 Hz.</dd>

  <dt>Compatibilità</dt>
  <dd>Computer Windows, macOS, Linux e ChromeOS con porta USB-C.</dd>

  <dt>Dimensioni</dt>
  <dd>112 × 42 × 15 millimetri.</dd>

  <dt>Peso</dt>
  <dd>78 grammi.</dd>
</dl>

<h2>Contenuto della confezione</h2>

<ul>
  <li>Aurora Hub Mini.</li>
  <li>Custodia protettiva in tessuto.</li>
  <li>Guida rapida all’installazione.</li>
</ul>

Spiegazione

Lista non ordinata con ul

Il tag <ul> identifica una unordered list, cioè una lista non ordinata. Ogni elemento deve essere inserito all’interno di un tag <li>. Nel nostro esempio, le caratteristiche del prodotto non hanno una priorità obbligatoria: il lettore può consultarle in qualsiasi ordine.

La lista non ordinata è adatta anche per accessori inclusi, vantaggi, colori disponibili o categorie di prodotti. Non è necessario aggiungere manualmente simboli come trattini o pallini: il browser genera automaticamente i marcatori predefiniti. In questo modo la struttura rimane comprensibile anche quando il contenuto viene visualizzato senza fogli di stile.

Lista ordinata con ol

Il tag <ol> crea una ordered list, cioè una lista ordinata. Gli elementi vengono numerati dal browser e devono essere racchiusi in <li>. La configurazione iniziale è un buon esempio perché l’utente dovrebbe seguire i passaggi in una sequenza precisa.

Una lista ordinata può essere usata anche per indicare il ranking dei prodotti, le priorità di una configurazione o i passaggi per richiedere assistenza. Se l’ordine degli elementi cambia il significato delle istruzioni, <ol> è preferibile a <ul>.

Lista di definizione con dl

Il tag <dl> rappresenta una description list, ovvero una lista di definizione. Ogni termine viene scritto con <dt>, mentre la sua descrizione viene inserita in <dd>. Questa struttura è particolarmente utile per specifiche tecniche, proprietà e valori di un prodotto.

Nel codice, “Uscita video” è il termine e “HDMI 2.0 fino a...” è la relativa descrizione. A differenza di una tabella, la lista di definizione esprime direttamente una relazione tra un’etichetta e il suo contenuto. È quindi una soluzione semantica per dati descrittivi, soprattutto quando ogni proprietà può avere una spiegazione articolata.

Best practice

• Scegli il tag in base al significato: usa <ul> per elementi senza ordine, <ol> per sequenze e <dl> per coppie termine-descrizione.
• Inserisci direttamente gli elementi: ogni <li> dovrebbe essere figlio di <ul> o <ol>, evitando contenitori superflui.
• Non usare liste per il layout: griglie e colonne devono essere gestite con CSS, non creando liste prive di significato.
• Mantieni le etichette concise: nei tag <dt> usa nomi chiari come “Peso”, “Compatibilità” o “Autonomia”.
• Scrivi descrizioni complete: il contenuto di <dd> deve essere comprensibile anche se letto separatamente dal termine.
• Evita di simulare numerazioni: non scrivere manualmente “1.”, “2.” e “3.” dentro una lista ordinata.
• Usa intestazioni coerenti: raggruppa le liste sotto titoli <h2> o <h3> che descrivano il contenuto.
• Verifica la lettura assistita: prova la pagina con uno screen reader per controllare che la relazione tra termini e descrizioni sia intuitiva.

È possibile personalizzare l’aspetto delle liste con CSS, ma la presentazione non dovrebbe modificare il significato semantico. Per esempio, trasformare una lista non ordinata in una griglia visiva non cambia il fatto che gli elementi siano concettualmente un insieme senza ordine.

Riepilogo

Un catalogo di prodotti può essere strutturato in modo efficace combinando i tre principali tipi di liste HTML. <ul> è indicato per caratteristiche e contenuti senza una sequenza obbligatoria. <ol> è la scelta corretta per istruzioni e procedure ordinate. <dl> permette di associare termini tecnici alle relative descrizioni, rendendo leggibili specifiche e proprietà.

Usare la semantica corretta migliora la manutenzione del codice, l’accessibilità e l’interpretazione dei contenuti da parte dei motori di ricerca. Prima di aggiungere elementi grafici o stili personalizzati, definisci quindi la relazione logica tra i dati e seleziona il tipo di lista più adatto.

Approfondisci con risorse ufficiali

• MDN Web Docs: documentazione sugli elementi ul, ol, li e dl.
• WHATWG HTML Living Standard: specifiche ufficiali sulla struttura semantica delle liste HTML.
• W3C WAI: linee guida per creare contenuti HTML più accessibili alle persone che usano tecnologie assistive.