back to top

Elenchi HTML: liste ordinate, non ordinate e di definizione

Vediamo adesso il cosa sono e come funzionano gli elenchi HTML, i quali possono essere numerati o puntati o, più correttamente, ordinati o non ordinati: i primi sono elenchi caratterizzati da una scaletta numerica o alfabetica, mentre i secondi sono elenchi di voci senza un ordine preciso.

Da un punto di vista funzionale, per fare un esempio, è corretto utilizzare un elenco puntato per una lista della spesa, mentre è preferibile un elenco numerato per descrivere i diversi passaggi di un procedimento matematico o di una ricetta in cui debba essere rispettata una precisa sequenza.

Esempio di elenco ordinato (o numerato):

  1. Prendi la mela
  2. Sbucciala
  3. Mangiala

Esempio di elenco non ordinato (o puntato):

  • Pippo
  • Pluto
  • Topolino

I tag <ol>, <ul> e <li>

In HTML, gli elenchi ordinati (cd. elenchi numerati) si generano attraverso il tag ol (ordered list) mentre quelli non ordinati (cd. elenchi puntati) mediante ul (unordered list). Entrambi utilizzano il tag li (list item) per specificare le singole voci (item) dell’elenco.

Vediamo adesso un esempio di codice HTML per creare un elenco ordinato:

<ol>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
</ol>

Vediamo ora un esempio di elenco non ordinato:

<ul>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
</ul>

Gli attributi type e start

Entrambi i tipi di elenco supportano l’attributo type, che permette di specificare il tipo di elenco, mentre gli elenchi ordinati supportano anche l’attributo start, che permette di far partire l’elenco dal numero o lettera che si desidera.

L’attributo type supporta i seguenti valori:

  • Elenchi ordinati
    • A – visualizza l’elenco alfabetico con lettere maiuscole
    • a – visualizza l’elenco alfabetico con lettere minuscole
    • I – visualizza l’elenco con i numeri romani maiuscoli
    • i – visualizza l’elenco con i numeri romani minuscoli
    • 1 – visualizza l’elenco con i numeri arabi
  • Elenchi non ordinati
    • disc – visualizza un cerchio pieno (di default)
    • square – visualizza un quadrato pieno
    • circle – visualizza un cerchio vuoto

Vediamo un esempio che comprenda sia type che start all’interno di un elenco ordinato:

<ol type="A" start="5">
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
</ol>

Questo il risultato:

  1. Bla, bla, bla…
  2. Bla, bla, bla…
  3. Bla, bla, bla…

E’ bene precisare che è possibile annidiare elenchi all’interno di altri elenchi. Vediamo un esempio:

<ul>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...
    <ul>
    <li>Bla, bla, bla...</li>
    <li>Bla, bla, bla...</li>
    <li>Bla, bla, bla...</li>
    <li>Bla, bla, bla...</li>
    <li>Bla, bla, bla...</li>
    </ul>
  </li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
</ul>

Questo il risultato:

  • Bla, bla, bla…
  • Bla, bla, bla…
  • Bla, bla, bla…
    • Bla, bla, bla…
    • Bla, bla, bla…
    • Bla, bla, bla…
    • Bla, bla, bla…
    • Bla, bla, bla…
  • Bla, bla, bla…
  • Bla, bla, bla…

Liste di definizione

Un tipo particolare di elenco HTML è dato dalle liste di definizione. Gli elenchi di questo tipo sono aperti dal tag HTML <dl> (definition list), mentre gli elementi sono composti ciascuno da due tag: <dt> (definition term) e <dd> (definition description).

Ciascun elemento della lista di definzione, quindi, è definito da due tag: col primo si identifica il termine che si vuole definire (dt), col secondo si da la definzione (dd):

<dl>
  <dt>HTML</dt>
  <dd>Linguaggio di markup ipertestuale</dd>
  <dt>PHP</dt>
  <dd>Linguaggio lato server per la creazione di siti web dinamici</dd>
</dl>

Da un punto di vista visivo il tag <dt> non produce alcun ritorno a capo il quale, invece, è prodotto dal tag <dd>.

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).