Elenchi puntati e numerati

Gli elenchi giocano un ruolo molto importante nei testi, ma anche nella definizione di elementi strutturali delle pagine HTML.

Dal punto di vista dell'organizzazione del testo sono utili ad esempio quando occorre sintetizzare concetti per punti, indicare in sequenza le fasi di un processo oppure stilare un elenco di definizioni o un glossario.

Nella organizzazione della struttura della pagina sono spesso utilizzati per definire menu ad esempio, cosa che anche semanticamente ha una sua valenza, perché si tratta sempre di liste.

Sul piano del rendering, tipicamente spezzano il ritmo tipografico e rendono il testo più gradevole e più leggibile.

Vediamo dunque quali sono le tre tipologie di elenco disponibili in HTML:

• Elenchi ordinati
• Elenchi non ordinati
• Elenchi di definizioni

Tutti e tre i tipi di elenchi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell'elenco. La sintassi ha quindi questa forma:

<elenco>
 <elemento>primo elemento<elemento>
 <elemento>secondo elemento<elemento>
 
 <elemento>N-esimo elemento<elemento>
</elenco>

UL, gli elenchi non ordinati (o elenchi puntati)

L'elenco non ordinato (unordered list) è forse il più usato e si descrive utilizzando il tag
<ul>. Al suo interno possiamo inserire gli elementi della lista (list item) utilizzando il tag <li>. Ecco un semplice esempio

<ul>
  <li>primo elemento</li>
  <li>secondo elemento</li>
  <li>terzo elemento</li>
</ul>

Anche se la resa grafica dipende dal browser, il risultato in genere è quello che otteniamo quando utilizziamo gli elenchi puntati nei programmi di videoscrittura: otteniamo gli elementi uno sotto l'altro con un margine a sinistra e il classico "pallino pieno" per ogni punto.

Possiamo scegliere altri caratteri o simboli, ma vedremo in seguito come farlo sfruttando i CSS, per ora ci basti dire che l'attributo "type" che era previsto a questo scopo è stato deprecato da HTML 5.

Annidare le liste non numerate

In generale possiamo inserire diversi livelli all'interno delle liste, creando delle strutture "ad albero", utili a definire oggetti come menu o tassonomie. Per farlo è sufficiente inserire un nuovo elenco all'interno di un elemento:

<ul>
	<li>primo della 1a lista</li>
	<li>secondo della 1a lista
		<ul>
			<li>primo della 2a lista</li>
			<li>secondo della 2a lista
				<ul>
					<li>primo della 3a lista</li>
				</ul>
			</li>
			<li>terzo della 2a lista</li>
		</ul>
	</li>
</ul>

Interessante notare che il rendering di base in genere mostra simboli diversi per i punti a seconda del livello dell'elemento.

OL, gli elenchi ordinati (o elenchi numerati)

Gli elenchi ordinati (ordered list) sono contraddistinti dall'enumerazione degli elementi che compongono la lista. Il tag da utilizzare per aprire un elenco ordinato è <ol> e anche in questo caso gli elementi sono individuati dal tag <li>:

Testo che precede la lista
<ol>
	<li>primo elemento</li>
	<li>secondo elemento</li>
	<li>terzo elemento</li>
</ol>
Testo che segue la lista

Avremo quindi una serie progressiva ordinata e individuata da lettere o numeri. Per riprendere il parallelo con i software di videoscrittura, sarebbero i cosiddetti elenchi numerati.

Attributo type, per descrivere il tipo di elenco

L'attributo type applicato al tag ol serve per specificare il tipo di enumerazione che vogliamo applicare. Lo stile di enumerazione visualizzato di default dal browser è quello numerico, ma possiamo indicare se le voci di elenco seguono punti definiti come numeri, come lettere dell'alfabeto o come numeri romani.

Proviamo quindi a vedere come rendere un elenco annidato con diversi tipi di enumerazione:

<ol type="1"><!-- numeri -->
	<li>Primo livello
		<ol type="a"><!-- lettere -->
			<li>Secondo livello
				<ol type="I"><!-- numeri romani -->
					<li>Terzo livello</li>
					<li>Terzo livello</li>
				</ol>
			</li>
			<li>Secondo livello</li>
		</ol>
	</li>
	<li>Primo livello</li>
</ol>

Poiché questi aspetti hanno rilevanza semantica, non è stato necessario deprecare l'attributo come nel caso di ul.

Start e value, riprendere o gestire la numerazione

Può capitare che per esigenze diverse vogliamo far partire la numerazione da un certo valore, in questo caso ci serviamo di due attributi:

Ecco un semplice esempio:

<!-- lista che parte da 10 -->
<ol start="10">
<li>elemento</li>
<li>elemento</li>
<!-- da questo punto in poi contiamo a partire da 30 -->
<li value="30">elemento</li>
<li>elemento</li>
</ol>

Liste di definizione

Gli liste di definizione sono lo strumento ideale per elenchi in è necessario associare ad ogni voce anche una testo descrittivo. Definiamo le liste (definition list) con il tag <dl>, mentre gli elementi dell'elenco, a differenza delle altre liste, sono formati da due parti:

Vediamo un esempio:

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 atraverso gli stili</dd>
</dl>
ci sono poi altri tag che...

Il "vecchio" attributo type

Ovviamente la scelta del tipo di elenco attraverso l'attributo type è deprecato dal W3C, perché si tratta di una caratteristica che riguarda la formattazione, e dunque andrebbe effettuata utilizzando i CSS. Con i fogli di stile c'è anche la possibilità di scegliere un'immagine (ad esempio una GIF) come segno distintivo per l'elenco puntato. Chi fosse interessato ad approfondire può consultare la relativa lezione della guida ai fogli di stile.

Riportiamo comunuque alcuni esempi di utilizzo dell'attributo type per come veniva utilizzato in passato.