Le liste non numerate

Le liste non numerate, chiamate anche elenchi puntati, vengono utilizzate quando l'ordine degli elementi non è importante. Sono molto utili, ad esempio, per inserire note, caratteristiche di un prodotto, requisiti oppure semplici elenchi di informazioni.

Come inserire una lista non numerata

Per creare una lista non numerata si utilizza il tag <ul>, che racchiude tutto l'elenco. Ogni elemento della lista viene invece inserito all'interno del tag <li>. Il browser visualizzerà automaticamente un simbolo accanto a ogni voce.

<h3>Se non arriva la mail, controlla che:</h3>
<ul>
  <li>Il computer sia connesso a internet</li>
  <li>Hai inserito un indirizzo mail corretto</li>
  <li>La mail non sia nella cartella spam;</li>
</ul>

Tipi di liste non numerate

Puoi modificare il simbolo visualizzato accanto a ogni elemento della lista utilizzando la proprietà CSS list-style-type:valore. Questa proprietà deve essere inserita all'interno dell'attributo style=”valore” del tag <ul>.

Il tipo “disc” (standard)

Inserendo list-style-type:disc, la lista utilizzerà i classici pallini pieni. Questo è il valore predefinito, quindi, se non specifichi alcuna proprietà, verrà utilizzato automaticamente.

<h3>Se non arriva la mail, controlla che:</h3>
<ul style="list-style-type:disc">
  <li>Il computer sia connesso a internet</li>
  <li>Hai inserito un indirizzo mail corretto</li>
  <li>La mail non sia nella cartella spam;</li>
</ul>

Il tipo “circle”

Inserendo list-style-type:circle, ogni elemento sarà preceduto da un cerchio vuoto, cioè con il bordo nero e l'interno bianco.

<h3>Se non arriva la mail, controlla che:</h3>
<ul style="list-style-type:circle">
  <li>Il computer sia connesso a internet</li>
  <li>Hai inserito un indirizzo mail corretto</li>
  <li>La mail non sia nella cartella spam;</li>
</ul>

Il tipo “square”

Inserendo list-style-type:square, gli elementi della lista saranno contrassegnati da quadrati pieni invece che da pallini.

<h3>Se non arriva la mail, controlla che:</h3>
<ul style="list-style-type:square">
  <li>Il computer sia connesso a internet</li>
  <li>Hai inserito un indirizzo mail corretto</li>
  <li>La mail non sia nella cartella spam;</li>
</ul>

Il tipo “none”

Inserendo list-style-type:none, la lista non mostrerà alcun simbolo accanto agli elementi. I tag <ul> e <li> continueranno comunque a organizzare correttamente il contenuto, ma senza marcatori grafici.

<h3>Se non arriva la mail, controlla che:</h3>
<ul style="list-style-type:none">
  <li>Il computer sia connesso a internet</li>
  <li>Hai inserito un indirizzo mail corretto</li>
  <li>La mail non sia nella cartella spam;</li>
</ul>