2.16
Le liste ordinate, non ordinate e le liste di definizione. Strumenti utili per raggruppare e migliorare l'esposizione.
I cataloghi svolgono un ruolo di notevole importanza nei documenti, così come nella definizione degli aspetti strutturali delle pagine in HTML.
Dal punto di vista dell’organizzazione del contenuto, risultano essere particolarmente utili quando si rende necessario riepilogare informazioni in modo puntato, illustrare sequenzialmente le fasi di un procedimento o stilare un inventario di definizioni e un glossario.
Per quanto riguarda la struttura della pagina web, sono frequentemente impiegati per definire, ad esempio, le opzioni di un menu, il che ha anche una rilevanza semantica in quanto tali menu sono sempre considerati liste.
Sotto l’aspetto della formattazione, solitamente interrompono la continuità tipografica e migliorano la leggibilità e l’aspetto del testo.
Esaminiamo quindi le tre categorie di elenchi disponibili in HTML:
- Elenchi ordinati
- Elenchi non ordinati
- Elenchi di definizioni
Tutte e tre queste varianti di elenco seguono la stessa struttura: si apre il tag dell’elenco, si elencano gli elementi desiderati, ciascuno con il proprio tag, e infine si chiude il tag dell’elenco. La sintassi presenta quindi il seguente formato:
<elenco>
<elemento>primo elemento</elemento>
<elemento>secondo elemento</elemento>
(…)
<elemento>N-esimo elemento</elemento>
</elenco>
Elenchi Puntati non ordinati
I listati non ordinati, noti anche come elenchi puntati o UL, rappresentano una delle forme più comuni di elenco in HTML. Per definire un elenco non ordinato, si utilizza il tag <ul>. All’interno di esso, è possibile inserire gli elementi dell’elenco, noti come “elementi di lista” (list item), utilizzando il tag <li>. Di seguito, un esempio semplice:
<ul> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ul> La resa visuale di questi elenchi può variare a seconda del browser utilizzato, ma in genere si presenta come quando si utilizzano elenchi puntati in programmi di videoscrittura: gli elementi sono elencati uno sotto l’altro con un rientro a sinistra e un classico “pallino pieno” per ciascun punto.
È possibile personalizzare ulteriormente l’aspetto dei punti elenco o utilizzare simboli diversi, ma per farlo è necessario utilizzare il CSS. È importante notare che l’attributo “type” precedentemente utilizzato a questo scopo è stato dichiarato obsoleto a partire da HTML5.
Come Annidare Liste non Ordinate
Per annidare le liste non numerate, è possibile creare strutture a più livelli all’interno delle liste, formando delle gerarchie “a albero” che sono utili per definire elementi come menu o tassonomie. Per farlo, basta inserire un nuovo elenco all’interno di un elemento di lista. Ecco un esempio:
<ul> <li>primo elemento della prima lista</li> <li>secondo elemento della prima lista <ul> <li>primo elemento della seconda lista</li> <li>secondo elemento della seconda lista <ul> <li>primo elemento della terza lista</li> </ul> </li> <li>terzo elemento della seconda lista</li> </ul> </li> </ul>
È interessante notare che di solito il rendering di base varia la forma dei punti elenco a seconda del livello dell’elemento, creando una sorta di gerarchia visiva.
Elenchi Ordinati e/o Numerati
I cataloghi ordinati, noti anche come elenchi numerati o OL, si distinguono per l’enumerazione dei punti all’interno dell’elenco. Per creare un elenco ordinato, è necessario utilizzare il tag <ol>. All’interno di questo tag, gli elementi dell’elenco sono identificati utilizzando il tag <li>. Ecco un esempio:
Testo che precede l'elenco <ol> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ol> Testo che segue l'elencoIn questo modo, si ottiene un elenco progressivo in cui gli elementi sono numerati o etichettati con lettere, a seconda delle impostazioni predefinite. Per fare un parallelo con i programmi di videoscrittura, questo sarebbe simile a un elenco numerato.
Come Gestire la Numerazione
Per gestire la numerazione all’interno di un elenco ordinato (OL), è possibile utilizzare gli attributi “start” e “value”. Ecco come funzionano questi attributi:
- start (applicato a
<ol>): Questo attributo indica il valore iniziale da cui far partire la numerazione della lista. Ad esempio, se si desidera iniziare la numerazione da 10, si utilizza l’attributo “start” come segue:
<!-- lista che parte da 10 --> <ol start="10"> <li>elemento</li> <li>elemento</li> <!-- da questo punto in poi, la numerazione parte da 30 --> <li value="30">elemento</li> <li>elemento</li> </ol>In questo esempio, l’elenco inizia da 10, e a partire dal terzo elemento, la numerazione viene modificata per iniziare da 30.
- value (applicato a
<li>all’interno di un<ol>): Questo attributo si applica agli elementi dell’elenco e indica il valore specifico da assegnare a un determinato elemento. Inoltre, modifica la numerazione anche degli elementi successivi nell’elenco. Ad esempio:
<ol start="10"> <li>elemento</li> <li>elemento</li> <li value="30">elemento</li> <!-- Questo elemento inizia con il valore 30 --> <li>elemento</li> <!-- La numerazione continua da 31 --> </ol>In questo caso, il terzo elemento inizia con il valore 30, e la numerazione prosegue da 31 per gli elementi successivi nell’elenco.
Liste di Definizione
Per creare liste di definizione in cui è necessario associare a ciascun termine una descrizione, puoi utilizzare i tag <dl>, <dt>, e <dd>. Ecco come funzionano questi tag:
dl (definition list): Questo tag delimita la lista di definizione nel documento HTML.
dt (definition term): Questo tag indica il termine da definire. A differenza dell’elemento
<li>, non ha un rientro a sinistra.dd (definition description): Questo tag rappresenta la definizione vera e propria del termine. Di solito, questo elemento è reso con un rientro.
Ecco un esempio di lista di definizione:
Ecco i principali tag per delimitare il testo: <dl> <dt>p</dt> <dd>individua l'apertura di un nuovo paragrafo</dd> <dt>div</dt> <dd>individua l'apertura di un nuovo blocco di testo</dd> <dt>span</dt> <dd>individua l'apertura di un elemento inline, cui attribuire una formattazione attraverso gli stili</dd> </dl>In questo esempio, stiamo definendo i principali tag per delimitare il testo, fornendo un termine seguito dalla sua descrizione. La lista di definizione è utile quando è necessario associare spiegazioni o definizioni ai termini, rendendo più chiaro il significato dei concetti presentati.