10 Elenchi

Argomenti

  1. Introduzione agli elenchi
  2. Elenchi non ordinati (UL), elenchi ordinati (OL), e voci di elenco (LI)
  3. Elenchi di definizioni: gli elementi DL, DT, e DD
    1. Presentazione visuale degli elenchi
  4. Gli elementi DIR e MENU

10.1 Introduzione agli elenchi

L'HTML offre agli autori diversi meccanismi per specificare elenchi di informazioni. Ogni elenco deve contenere uno o più voci di elenco. Gli elenchi possono contenere:

L'elenco precedente, per esempio, è un elenco non ordinato, creato con l'elemento UL:

<UL>
<LI>Informazioni non ordinate. 
<LI>Informazioni ordinate. 
<LI>Definizioni. 
</UL>

Un elenco ordinato, creato usando l'elemento OL, conterrà informazioni in cui l'ordine deve essere evidenziato, come in una ricetta:

  1. Amalgamare bene fra loro gli ingredienti asciutti.
  2. Aggiungere gli ingredienti liquidi.
  3. Mescolare per 10 minuti.
  4. Cuocere in forno per un'ora a 300 gradi.

Gli elenchi di definizioni, creati usando l'elemento DL, consistono generalmente di una serie di coppie espressione/definizione (quantunque gli elenchi di definizioni possano avere altre applicazioni). Perciò, quando si pubblicizza un prodotto, si può usare un elenco di definizioni:

Costo ribassato
La nuova versione di questo prodotto costa significativamente meno della precedente!
Più facile da usare
Abbiamo modificato il prodotto così che è molto più facile usarlo!
Adatto ai bambini
Puoi lasciare i tuoi bambini soli in una stanza con questo prodotto e non si faranno male (non è una garanzia).

definita in HTML come:

<DL>
<DT><STRONG>Costo ribassato</STRONG>
<DD>La nuova versione di questo prodotto costa significativamente meno della 
precedente!
<DT><STRONG>Più facile da usare</STRONG>
<DD>Abbiamo modificato il prodotto così che è molto più facile usarlo!
<DT><STRONG>Adatto ai bambini</STRONG>
<DD>Puoi lasciare i tuoi bambini soli in una stanza con questo prodotto e
non si faranno male (non è una garanzia).
</DL>

Gli elenchi possono anche essere annidati, e differenti tipi di elenchi possono essere usati insieme, come nell'esempio seguente, che è un elenco di definizioni contenente un elenco non ordinato (gli ingredienti) e un elenco ordinato (la preparazione):

Ingredienti:
Preparazione:
  1. Amalgamare bene fra loro gli ingredienti asciutti.
  2. Aggiungere gli ingredienti liquidi.
  3. Mescolare per 10 minuti.
  4. Cuocere in forno per un'ora a 300 gradi.
Annotazioni:
La ricetta può essere arricchita con l'aggiunta di uvetta.

La precisa presentazione dei tre tipi di elenco dipende dall'interprete HTML. Si scoraggiano gli autori dall'utilizzare elenchi unicamente come mezzo per indentare il testo. Questo è un aspetto stilistico ed è gestito appropriatamente dai fogli di stile.

10.2 Elenchi non ordinati (UL), elenchi ordinati (OL), e voci di elenco (LI)

<!ELEMENT UL - - (LI)+                 -- elenco non ordinato -->
<!ATTLIST UL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >
<!ELEMENT OL - - (LI)+                 -- elenco ordinato -->
<!ATTLIST OL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag di inizio: obbligatorio, Tag di fine: obbligatorio

<!ELEMENT LI - O (%flow;)*             -- voce di elenco -->
<!ATTLIST LI
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag di inizio: obbligatorio, Tag di fine: opzionale

Definizioni degli attributi

type =  style-information [CI]
Disapprovato. Questo attributo imposta lo stile di una voce di elenco. I valori attualmente disponibili sono pensati per interpreti HTML visuali. I valori possibili sono descritti più avanti (assieme con le informazioni sulla sensibilità dei valori alla forma maiuscola/minuscola delle lettere).
start = number [CN]
Disapprovato. Unicamente per OL. Questo attributo specifica il numero da cui fare partire la prima voce di un elenco ordinato. Il numero iniziale di default è "1". Si noti che mentre il valore di questo attributo è un intero, l'etichetta corrispondente può non essere numerica. Perciò, quando lo stile della voce di elenco è lettere latine maiuscole (A, B, C, ...), start=3 significa "C". Quando lo stile è numerali romani minuscoli, start=3 significa "iii", ecc.
value = number [CN]
Disapprovato. Unicamente per LI. Questo attributo imposta il numero della voce di elenco corrente. Si noti che mentre il valore di questo attributo è un intero, l'etichetta corrispondente può non essere numerica (si veda l'attributo start).
compact [CI]
Disapprovato. Quando impostato, questo attributo booleano suggerisce agli interpreti HTML visuali di riprodurre l'elenco in modo più compatto. L'interpretazione di questo attributo dipende dall'interprete HTML.

Attributi definiti altrove

Gli elenchi ordinati e gli elenchi non ordinati vengono riprodotti in maniera identica eccetto che gli interpreti HTML visuali numerano le voci negli elenchi ordinati. Gli interpreti HTML possono presentare quelle numerazioni in una varietà di modi. Le voci negli elenchi non ordinati non vengono numerate.

Entrambi i tipi di elenchi sono composti da sequenze di voci definiti tramite l'elemento LI (il cui tag di fine può essere omesso).

Questo esempio illustra la struttura base di un elenco.

<UL>
   <LI> ... prima voce dell'elenco...
   <LI> ... seconda voce dell'elenco...
   ...
</UL>

Gli elenchi possono anche essere annidati:

ESEMPIO DISAPPROVATO:

<UL>
     <LI> ... Livello uno, numero uno...
     <OL> 
        <LI> ... Livello due, numero uno...
        <LI> ... Livello due, numero due...
        <OL start="10"> 
           <LI> ... Livello tre, numero uno...
        </OL> 
        <LI> ... Livello due, numero tre...
     </OL> 
     <LI> ... Livello uno, numero due...
</UL>

Dettagli sulla numerazione. Negli elenchi ordinati non è possibile continuare la numerazione di elenco automaticamente da un elenco precedente o celare la numerazione di alcune voci di elenco. Comunque gli autori possono modificare il numero di una voce di elenco impostando il suo attributo value. La numerazione delle voci di elenco successive continua dal nuovo valore. Per esempio:

<ol>
<li value="30"> crea la voce numero 30.
<li value="40"> crea la voce numero 40.
<li> crea la voce numero 41.
</ol>

10.3 Elenchi di definizioni: gli elementi DL, DT, e DD

<!-- elenchi di definizioni - DT per il termine, DD per la sua definizione -->
<!ELEMENT DL - - (DT|DD)+              -- elenco di definizioni -->
<!ATTLIST DL
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag di inizio: obbligatorio, Tag di fine: obbligatorio

<!ELEMENT DT - O (%inline;)*           -- termine della definizione -->  
<!ELEMENT DD - O (%flow;)*             -- descrizione della definizione -->
<!ATTLIST (DT|DD)
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Tag di inizio: obbligatorio, Tag di fine: opzionale

Attributi definiti altrove

Gli elenchi di definizioni variano solo di poco dagli altri tipi di elenco in quanto le voci di elenco consistono di due parti: un termine (o vocabolo) e una descrizione. L'espressione è fornita dall'elemento DT ed è limitata ad un contenuto in linea. La descrizione è data con un elemento DD che contiene contenuto a livello del blocco.

Ecco un esempio:

  
<DL>
  <DT>Dweeb
  <DD>giovane persona eccitabile che può maturare
    in un <EM>Nerd</EM> o <EM>Geek</EM>
  <DT>Cracker
  <DD>hacker di Internet
  <DT>Nerd
  <DD>individuo di sesso maschile così preso dalla Rete che dimentica il
    compleanno di sua moglie
</DL>

Ecco un esempio con termini e descrizioni multiple:

<DL>
   <DT>Center
   <DT>Centre
   <DD> Un punto equidistante da tutti i punti
              della superficie di una sfera.
   <DD> In alcuni sport all'aperto, il giocatore che
              occupa la posizione mediana sul terreno, zona di campo,
              o linea d'attacco.
</DL>

Un'altra applicazione di DL, per esempio, è per marcare dialoghi, con ciascun elemento DT che nomina un interlocutore, e ciascun elemento DD che contiene le sue parole.

10.3.1 Presentazione visuale degli elenchi

Nota. La seguente è una descrizione informativa del comportamento di alcuni interpreti HTML visuali correnti quando formattano gli elenchi. I fogli di stile consentono un migliore controllo della formattazione degli elenchi (ad es., per la numerazione, le convenzioni dipendenti dalla lingua, le indentazioni, ecc.).

Gli interpreti HTML visuali generalmente indentano gli elenchi annidati in riferimento al livello di annidamento corrente.

Per entrambi gli elementi OL e UL, l'attributo type specifica le opzioni di riproduzione per interpreti HTML visuali.

Per l'elemento UL, i valori possibili dell'attributo type sono disc, square, e circle. Il valore di default dipende dal livello di annidamento dell'elenco corrente. Questi valori sono insensibili alla forma maiscola/minuscola delle lettere che li specificano.

Come ciascun valore viene presentato dipende dall'interprete HTML. Gli interpreti HTML dovrebbero cercare di presentare un "disc" come un piccolo cerchio pieno, un "circle" come un piccolo cerchio vuoto, e uno "square" come un piccolo quadrato vuoto.

Un interprete HTML grafico potrebbe mostrare questo come:

Una possibile visualizzazione di un disco per il valore "disc"
Una possibile visualizzazione di un cerchio per il valore "circle"
Una possibile visualizzazione di un quadrato per il valore "square"

Per l'elemento OL, i possibili valori dell'attributo type sono riassunti nella tabella sottostante (essi sono sensibili alla forma maiscola/minuscola delle lettere che li specificano):

TypeStile di numerazione
1numeri arabi1, 2, 3, ...
alettere minuscolea, b, c, ...
Alettere maiuscoleA, B, C, ...
inumeri romani minuscolii, ii, iii, ...
Inumeri romani maiuscoliI, II, III, ...

Si noti che l'attributo type è disapprovato e che gli stili degli elenchi dovrebbero essere gestiti mediante i fogli di stile.

Per esempio, usando CSS, si può specificare che lo stile dei numeri per le voci in un elenco numerato debba essere numeri romani minuscoli. Nel brano sotto riportato, ciascun elemento OL appartenente alla classe "withroman" avrà un numero romano che precede i suoi elementi.

<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Passo uno ...  
<LI> Passo due ...
</OL>
</BODY>

Anche la riproduzione di un elenco di definizioni dipende dall'interprete HTML. L'esempio:

  
<DL>
  <DT>Dweeb
  <DD>giovane persona eccitabile che può maturare
    in un <EM>Nerd</EM> o <EM>Geek</EM>
  <DT>Cracker
  <DD>hacker di Internet
  <DT>Nerd
  <DD>individuo di sesso maschile così preso dalla Rete che dimentica il
    compleanno di sua moglie
</DL>

potrebbe essere visualizzato così:

Dweeb
       giovane persona eccitabile che può maturare in un Nerd o Geek
Cracker
       hacker di Internet
Nerd
       individuo di sesso maschile così preso dalla Rete che dimentica 
il compleanno di sua moglie

10.4 Gli elementi DIR e MENU

DIR e MENU sono disapprovati.

Si veda la DTD transitoria per la definizione formale.

Attributi definiti altrove

L'elemento DIR è stato progettato per creare elenchi di directory multicolonna. L'elemento MENU è stato progettato per essere usato per elenchi di menu a colonna singola. Entrambi gli elementi hanno la stessa struttura di UL, soltanto una diversa riproduzione. In pratica, un interprete HTML riprodurrà un elenco DIR o MENU esattamente come un elenco UL.

Si raccomanda vivamente di usare l'elemento UL anziché questi elementi.