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>

Elemento voce dell'elenco, da solo serve a poco deve essere combinato con altri elementi descritti sotto. Non necessita della chiusura </li> anche se è consigliato metterla.

---

 

<OL>...</OL>

L'elemento <ol> prevede al suo interno l'elemento <li> come voce dell'elenco. Serve per una visualizzazione ordinata e numerata di un elenco puntato. Usato per evidenziare una precisa sequenza nelle voci che compongono la lista. Per esempio i passi da seguire per un principiante che inizi da zero qui su web-link sono:

<ol> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

 

TYPE

Per default la numerazione segue l'ordine cronologico 1, 2, 3, e così via ma grazie all'attributo type si possono cambiare le voci dell'elenco di una lista ol in uno dei seguenti modi:

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, ...

<ol type="a"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

<ol type="I"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

 

START

Nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarà sufficiente fare uso dell'attributo start impostando il numero da cui iniziare l'incremento.

<ol start="15"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

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":

<ol type="a" start="3"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

---

 

<UL>...</UL>

L'elemento <ul> prevede al suo interno l'elemento <li> come voce dell'elenco. Serve per una visualizzazione non ordinata di un elenco puntato.

<ul> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

 

TYPE

Per default i simboli delle voci in una lista non ordinata sono dei dischi solidi o pallini pieni. Grazie all'attributo type si possono cambiare questi simboli (dell'elenco di una lista ul) in cerchietti (circle) o quadratini (square).

A questo tipo di elenco sono assegnati dei simboli che variano man mano che ci si sposta di livello, i simboli adoperati sono: disco solido, cerchio, quadrato. Volendo si possono cambiare, è sufficiente specificarlo con l'attributo TYPE:

type="disc" disco solido
type="circle" cerchietto
type="square" quadrato

<ul type="circle"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

<ul type="square"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

Consiglio: l'uso dei fogli di style permette un controllo molto più accurato e versatile come per esempio inserire una qualsiasi immagine grafica al posto di uno dei simboli standard. ol { list-style-image: url(file:nome_immagine.gif); } la proprietà list-style-image è in grado di richiamare una piccola immagine grafica da usare al posto del pallino.

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

---

 

DIR

Nel caso in cui si volesse avere la numerazione o il simbolo a destra della lista anziché a sinistra, si farà uso dell'attributo dir che va bene sia per le liste ordinate che per quelle non ordinate impostando il valore destro rtl (sinistro ltr).

<ol dir="rtl"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ol>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

<ul type="square" dir="rtl"> <li>primi passi <li>Guida HTML <li>Guida CSS <li>XHTML con Style </ul>

Questo il risultato: Primi Passi Guida HTML Guida CSS XHTML con Style

---

 

Elenchi di definizione <DT>, <DD> e <DL>

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).

<dl> <dt>principianti</dt> <dd>rubrica primi passi</dd> <dt>appassionati</dt> <dd>guida html e guida CSS</dd> </dl>

Questo il risultato: principianti si consiglia l'uso della rubrica primi passi appassionati meglio approfondire con la guida html e quella CSS

 

<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.

<dl> <dt>Andrea</dt> <dd>oggi è una bella giornata</dd> <dt>Mario</dt> <dd>si, ammesso che non piova</dd> </dl>

Questo il risultato: Andrea oggi è una bella giornata Mario si, ammesso che non piova

 

<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.

<dl> <dt>Andrea</dt> <dd>oggi è una bella giornata</dd> <dt>Mario</dt> <dd>si, ammesso che non piova</dd> </dl>

Questo il risultato: Andrea oggi è una bella giornata Mario si, ammesso che non piova

---

Consiglio non usate le liste per l'indentazione o i ritorni a capo, per questo ci sono appositi attributi da dichiarare nei CSS. A proposito di CSS i due menù orizzontali che sono ad inizio pagina sono fatti proprio da liste opportunamente ridefinite all'interno di un CSS, da non credere ma è così. Per saperne di più a riguardo di questo tipo di menù si veda questa pagina.

---