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ù!

Questo articolo è stato letto 83 volte! Se ti è piaciuto, spargi la voce!

Tweet

Giacomo Rutili

Consulente informatico, sviluppo siti web in ambiente LAMP e personalizzando cms quali WordPress, Joomla! e Drupal. Mi occupo anche di Web Marketing, SEO (Ottimizzazione per i motori di ricerca), SEM (Marketing sui motori di ricerca), SMM (Marketing sui Social media) e tengo corsi di formazione professionale. Mi trovi anche su Google+ Giacomo Rutili+

More Posts - Website

Follow Me:

Ti potrebbe interessare anche...