Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

elenchi puntati e numerati

22 aprile 2011, Scritto da , category HTML

In HTML esistono due differenti tag per creare elenchi puntati (le liste) ed elenchi numerati.

Elenco puntato

Per creare un elenco puntato si utilizza il tag <ul>, che sta per unordered list, ovvero, lista non ordinata.

Per inserire nuovi elementi all’interno dell’elenco puntato si utilizza il tag <li>, che sta per list item, ovvero, elemento della lista.

Esempio:

<h1>Ricetta tiramisu</h1>
<h2>Ingredienti</h2>
<ul>
<li>cacao</li>
<li>caffè</li>
<li>uova</li>
<li>mascarpone</li>
<li>etc..</li>
<ul>

Il risultato sarà:

Ricetta tiramisù

Ingredienti

  • cacao
  • caffè
  • uova
  • mascarpone
  • etc..

L’elenco numerato si utilizza alla stessa maniera con la differenza che il tag non è <ul> ma <ol> che sta per ordered list, ovvero, lista ordinata (di elementi)

Elenchi numerati

Esempio:

<h2>Istruzioni</h2>
<ol>
<li>prendere il rosso delle uova e sbatterle</li>
<li>preparare il caffè</li>
<li>versare zucchero nelle uova</li>
<li>aggiungere mascarpone</li>
<li>etc..</li>
<ol>

Il risultato sarà:

Istruzioni

  1. prendere il rosso delle uova e sbatterle
  2. preparare il caffè
  3. versare zucchero nelle uova
  4. aggiungere mascarpone
  5. etc..

La comodità derivante dall’utilizzo delle liste sta, oltre che nell’eleganza della presentazione dei contenuti, nel fatto che se dovessi cambiare l’ordine degli elementi (spostando, aggiungendo o rimuovendo una voce), la numerazione verrebbe automaticamente aggiornata.

Se dovessi gestire questa operazione a mano la faccenda si farebbe indubbiamente molto lunga e noiosa. Provate, infatti, a scrivere del codice HTML che mostri lo stesso effetto di una lista ordinata e poi provate a cambiare l’ordine degli elementi. Supponiamo di scrivere qualcosa del genere:

1. preparare caffè<br>
2. versare zucchero<br>
3. aggiungere mascarpone<br>

e così via, poi provate ad eliminare una voce in mezzo a quest’elenco. Vi renderete subito conto che vi toccherà rinumerare tutti gli elementi successivi alla voce eliminata!

Un’altra caratteristica importante degli elenchi puntati e numerati è che possono essere annidati per ottenere dei sotto gruppi.

Esempio:

<ul>
<li>Fiat
<ul>
<li>Uno</li>
<li>punto</li>
<li>500</li>
<li>panda</li>
</ul></li>
<li>Lancia
<ul>
<li>Tema</li>
<li>Musa</li>
<li>Delta</li>
<li>Y</li>
</ul>
</li>
</ul>

Il risultato sarà:

  • Fiat
    • Uno
    • punto
    • 500
    • panda
  • Lancia
    • Tema
    • Musa
    • Delta
    • Y

Attributi del tag <li>

Diciamo che gli elenchi puntati e numerati, se ci dovessimo servire soltanto dell’HTML, non sono molto personalizzabili nell’aspetto… Tuttavia possiamo cambiare la forma del “bullet”, ovvero dell’indicatore di elemento. Vediamo come:

  • type: serve a cambiare la forma dell’indicatore. I valori possono essere:
    • Disc (pallino nero pieno, indicatore di default)
    • Circle (cerchiolino vuoto)
    • Square (rombo)

Applicando questi nuovi stili

<ul>
<li type="disc">Disc (pallino nero pieno, indicatore di default)</li>
<li type="circle">Circle (cerchiolino vuoto)</li>
<li type="square">Square (rombo)</li>
</ul>

il risultato sarà:

  • Disc (pallino nero pieno, indicatore di default)
  • Circle (cerchiolino vuoto)
  • Square (rombo)

Sempre meglio di niente, vero? 🙂

A forza di parlare di ricette mi è venuto un certo languorino… intanto che provate ad esercitarvi, mi divoro una coppetta di tiramisù! 🙂

  • Diana Tonelli

    Grazie, come sempre sei preciso ed esauriente! Speriamo di riuscire a ripassare tutto per mercoledì…! Ciao e buona giornata di Pasquetta!

    Diana

    • Buona pasquetta anche a voi, e, sopratutto, buona festa della liberazione!
      Ci vediamo mercoledì sera 🙂

  • andrea

    ciao grazie per l’articolo, una domanda come modificare il valore della distanza tra testo e punto e tra bordo e punto?
    grazie

    • con il padding!

      Prova una cosa come questa:

      ul li {padding-left: 10px}

      test

      Cambia il valore del padding a tuo piacere e vedi. Ciao! 🙂

  • Sergio

    Ciao Giacomo, innanzitutto grazie per queste info.
    Mi chiedevo come si potesse invertire la numerazione dell’elenco numerato, cioè partire dall’1 in basso e aumentare la numerazione verso l’alto…. spero di essermi spiegato. Elenco numerato anzichè da 1 a 20 da 20 a 1.
    Grazie,
    Sergio

    • non si può fare, e se ci pensi è normale. Come fa il sistema a sapere qual è l’ultimo numero da cui vuoi partire? 🙂