Liste: ul, ol, dl e quando usarle semanticamente

Le liste servono quando più elementi appartengono allo stesso gruppo. Non sono solo una scelta grafica: comunicano che quei contenuti sono collegati fra loro.

Lista non ordinata: <ul>

Usa <ul> quando l’ordine degli elementi non cambia il significato.

<ul>
  <li>HTML semantico</li>
  <li>CSS responsive</li>
  <li>Accessibilità</li>
</ul>

Esempi tipici:

• elenco di competenze;
• lista di link secondari;
• caratteristiche di un servizio;
• ingredienti senza ordine operativo.

Lista ordinata: <ol>

Usa <ol> quando la sequenza è importante.

<ol>
  <li>Crea il file `index.html`.</li>
  <li>Collega `style.css`.</li>
  <li>Apri la pagina nel browser.</li>
</ol>

Esempi tipici:

• istruzioni passo-passo;
• classifiche;
• procedure;
• roadmap ordinate.

Lista di descrizione: <dl>

Usa <dl> per coppie termine/descrizione.

<dl>
  <dt>HTML</dt>
  <dd>Linguaggio di markup per strutturare contenuti web.</dd>

  <dt>CSS</dt>
  <dd>Linguaggio per definire presentazione e layout.</dd>
</dl>

È utile per glossari, schede tecniche, metadati di un progetto o domande frequenti.

Liste annidate

Puoi inserire una lista dentro un elemento <li> quando un punto contiene sotto-elementi.

<ul>
  <li>
    Front-end
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Back-end</li>
</ul>

Non abusare delle liste annidate: oltre due livelli diventano difficili da leggere.

Errore comune

Non usare una lista solo perché vuoi punti elenco visivi. Se gli elementi non sono davvero parte di un gruppo, forse bastano paragrafi o card separate. Al contrario, non evitare una lista solo perché non vuoi i pallini: i marker si possono cambiare o rimuovere con CSS.

Esercizio

Scrivi:

• una lista di competenze con <ul>;
• una procedura di pubblicazione con <ol>;
• un piccolo glossario HTML/CSS con <dl>.

Poi controlla se la scelta del tag dipende dal significato, non dallo stile.