Elenchi o Liste

Elenchi <ul>, <ol> e <li>

Capita che su una pagina web si abbia la necessità di descrivere voci sottoforma di elenchi puntati, html offre questa possibilità con i tags <ul> elenchi non ordinati, <ol> elenchi ordinati e <li> per le voci di elenco. Questi tags permettono di ottenere un prodotto finale molto simile a quello che offrono programmi di videoscrittura.

<li>

L’elemento <li> (list item) voce dell’elenco, da solo serve a poco perchè deve essere combinato con altri elementi descritti sotto. Non necessita della chiusura </li> ma è consigliato metterla.

<ol>…</ol>

L’elemento <ol> (order list) lista ordinata, richiede al suo interno l’elemento <li> per visualizzare le voci in elenco. Serve per creare una lista ordinata e numerata di un elenco puntato di voci. Per esempio, i passi da seguire per un principiante che inizia da zero, qui su web-link, sono:

Questo il risultato:

type

L’attributo type applicato alle liste ordinate <ol> serve per impostare il tipo di lista, avete notato nell’esempio sopra che a fianco di ogni voce ci sono dei numeri progressivi? Non li ho messo io ma il tag <ol> che per default adopera la numerazione e segue l’ordine cronologico: 1, 2, 3, e così via. Con l’attributo type si possono cambiare i numeri con una delle seguenti alternative:

type=“A” Lettere maiuscole: A , B, C, …
type=“a” Lettere minuscole: a, b, c, …
type=“I” Numerazione romana maiuscola: I, II, III, …
type=“i” Numerazione romana minuscola: i, ii, iii, …
type=“l” I numeri come da default: 1, 2, 3, …

Questo il risultato:

start

L’attributo start cambia il valore iniziale nel caso in cui si volesse partire da un qualsiasi numero diverso da “1”, o da una lettera diversa da “a”, sarà sufficiente usare l’attributo start impostando il valore alfanumerico da cui iniziare l’incremento.

Questo il risultato:

Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare dalla lettera “C” ed essendo questa la terza lettera dell’alfabeto, si dovrà inserire il numero “3”:

Questo il risultato:

<ul>…</ul>

L’elemento <ul> (unorder list) lista non ordinata, richiede al suo interno l’elemento <li> per visualizzare le voci in elenco. Serve per creare una lista non ordinata di un elenco puntato di voci.

Questo il risultato:

type

L’attributo type applicato alle liste non ordinate <ul> serve per cambiare il simbolo alle voci della lista. Avete notato nell’esempio sopra che a fianco di ogni voce ci sono dei pallini pieni? Non li ho messo io ma il tag <ul> che per default adopera questo pallino. Con l’attributo type si possono cambiare in cerchietti (circle) o quadratini (square).

type=“disc” disco solido
type=“circle” cerchietto
type=“square” quadrato

Questo il risultato:

Questo il risultato:

Questo il risultato:

dir

L’attributo dir serve ad invertire la posizione dei simboli nel caso in cui la numerazione o il simbolo lo si volesse a destra della lista anziché a sinistra. L’attributo dir può essere usato sia per le liste ordinate <ol& che per quelle non ordinate <ul> impostando il valore rtl destro (sinistro ltr).

Questo il risultato:

Elenchi di definizione

Con gli elementi <dt>, <dd> e <dl> è possibile creare Elenchi di definizione, dove con <dt> si definisce il termine e con <dd> la sua definizione o descrizione. Il tutto racchiuso in una struttura <dl>

<dl>…</dl>

L’elemento <dl> prevede al suo interno gli elementi <dt> e <dd> come voci dell’elenco. Serve per una visualizzazione non ordinata e formata da due voci: un termine (dt) e la sua definizione (dd).

Questo il risultato:

<dt>…</dt>

L’elemento <dt> specifica il termine e da solo non ha senso, deve precedere l’elemento dd che serve per la sua definizione. Usato anche nei dialoghi dove con dt si identifica chi parla e dd le sue parole.

<dd>…</dd>

L’elemento <dd> specifica la definizione e da solo non ha senso, deve seguire l’elemento <dt> che specifica il termine. Usato anche nei dialoghi dove con <dt> si identifica chi parla e <dd> le sue parole.

A proposito di CSS i vari menù orizzontali che si trovano ad inizio pagina sono fatti proprio da liste ordinate e non opportunamente ridefinite all’interno di un CSS. Per saperne di più a riguardo di questo tipo di menù si veda questa pagina.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.