Esistono diversi tipi di liste in HTML. Innanzitutto, ci sono le liste puntate. In questo tipo di lista, le voci della lista sono dotate di un simbolo di elenco puntato, chiamato Bullet.
Le liste puntate sono introdotte dall'elemento di ul. Le voci della lista sono contrassegnate dall'elemento li.
<p>Argomenti attuali dal forum</p> <ul> <li>CSS non viene più eseguito</li> <li>Showroom stile hollywoodiano degli anni ‘40</li> <li>CSS della lista a discesa</li> <li>PHP connect/disconnect</li> <li>Il mio piccolo showroom - Principiante chiede consigli!</li> </ul>
Ecco come appare il risultato nel browser:
Viene inserito un simbolo di elenco prima di ciascuna voce. L'aspetto predefinito di questo simbolo è determinato dai browser. Anche se ci sono attributi con cui è possibile influenzare l'aspetto delle liste, questi dovrebbero essere evitati. Al loro posto entrano in gioco le proprietà CSS.
Le liste puntate possono anche essere nidificate. Date un'occhiata all'immagine seguente:
Qui si capisce cosa significhi nidificare una lista del genere.
La sintassi per farlo è la seguente:
<ul>
<li>Tutorials
<ul>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ul>
</li>
<li>Videotraining
<ul>
<li>3D</li>
<li>Gestione dei media</li>
<li>Web</li>
</ul>
</li>
<li>Consigli</li>
<li>Negozi</li>
</ul>
All'interno di una voce di lista può esserci un'altra lista. Inoltre, non è necessario che si tratti obbligatoriamente di una lista puntata. Infatti, è possibile inserire anche altri tipi di liste - che verranno presentate in questo tutorial.
In HTML5 non è necessario utilizzare </li> per chiudere. Tuttavia, per una migliore leggibilità, è consigliabile sempre chiudere l'elemento. Tuttavia, sintatticamente corretto sarebbe anche qualcosa del genere:
<p>Gli argomenti attuali dal forum</p> <ul> <li>CSS non viene più eseguito <li>Showroom stile hollywoodiano degli anni ‘40 <li>CSS della lista a discesa <li>PHP connect/disconnect <li>Il mio piccolo showroom - Principiante chiede consigli! </ul>
Liste numerate
Oltre alle liste puntate, è possibile definire anche liste numerate. Anche qui, inizialmente un'immagine che illustra cosa rappresentano effettivamente tali liste numerate.
Quindi, ai voci della lista vengono aggiunti numeri consecutivi. Le liste numerate sono introdotte dall'elemento ol.
L'esempio seguente mostra come utilizzare questo elemento.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
Come nelle liste puntate, anche qui le singole voci sono contrassegnate dall'elemento li.
Teoricamente è possibile annidare anche liste puntate.
<ol>
<li>Tutorials
<ol>
<li>2D</li>
<li>3D</li>
<li>Web</li>
</ol>
</li>
<li>Videotraining
<ol>
<li>3D</li>
<li>Gestione dei media</li>
<li>Web</li>
</ol>
</li>
<li>Consigli</li>
<li>Negozi</li>
</ol>Tuttavia, il risultato nel browser è deludente.
Infatti, non si ottiene una numerazione secondo lo schema seguente:
1. Tutorial 2D
1.1 3D
1.2 Web
- Videotraining 3D
2.1 Gestione dei media
2.2 Web - Consigli
- Negozi
Con puro HTML non è possibile fare una cosa del genere. In realtà è necessario ricorrere a CSS per numerare automaticamente i contenuti secondo uno schema simile.
Liste di definizioni
Un'altra variante di lista sono le cosiddette liste di definizioni. Anche per queste, inizialmente un esempio di come appare tale lista nel browser:
Il principale ambito di utilizzo delle liste di definizioni sono i glossari. Ecco la sintassi che ha portato all'output mostrato in precedenza:
<dl>
<dt>AM</dt>
<dd>AM - Posta aerea</dd>
<dd>AM - Maresciallo dell'aria</dd>
<dd>AM - Amberg</dd>
<dd>AM - Americio</dd>
<dd>AM - Amstetten</dd>
<dt>AN</dt>
<dd>AN - sopra nominato</dd>
<dd>AN - Nodo di accesso</dd>
<dd>AN - Ancona</dd>
</dl>In una lista di definizioni si ha sempre a che fare con tre elementi. Le liste sono introdotte dall'elemento dl. Questa è quindi la struttura esterna. La parola da definire è contrassegnata da un elemento dt. Questo è in definitiva il termine di definizione. La descrizione della definizione, a sua volta, è fornita tramite l'elemento dd.
È possibile annidare liste di definizioni. Questo funziona allo stesso modo di quanto mostrato per le altre varianti di liste.
Come appaiono di default le liste di definizioni, è determinato nuovamente dal browser. Ma alla fine potrete fissare il layout desiderato tramite CSS.
Nelle versioni precedenti di HTML c'erano anche liste di menu e di directory. Per queste venivano utilizzati i due elementi menu e dir. L'elemento dir non è più incluso in HTML5. La situazione è diversa per menu. Questo elemento è stato reimplementato e in futuro potrà essere utilizzato per menu contestuali e barre degli strumenti. Ecco un esempio di come il W3C si aspetta che venga utilizzata una tipica applicazione di menu:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">Nuovo...</button> <button type="button" onclick="fopen()">Apri...</button> <button type="button" onclick="fsave()">Salva</button> <button type="button" onclick="fsaveas()">Salva come...</button> </menu> </li> <li> <menu label="Modifica"> <button type="button" onclick="ecopy()">Copia</button> <button type="button" onclick="ecut()">Taglia</button> <button type="button" onclick="epaste()">Incolla</button> </menu> </li> <li> <menu label="Guida"> <li><a href="guida.html">Guida</a></li> <li><a href="info.html">Informazioni</a></li> </menu> </li> </menu>
Attualmente questa forma non è ancora supportata da nessun browser.
Pertanto, al momento, menu non dovrebbe essere utilizzato.
Creare liste
Un'osservazione ancora sulle liste. Molte pagine web utilizzano attributi HTML appropriati per la formattazione delle liste. Ad esempio, con <ul type="square"> è possibile far sì che vengano mostrati dei rettangoli prima delle voci nell'elenco puntato.
Allo stesso modo, è possibile definire il tipo di numerazione per le liste numerate.
<ol type="A">
Tuttavia, è importante non utilizzare tutto ciò che viene offerto. Meglio adatte sono le relative proprietà CSS. Quindi dovresti effettivamente utilizzarle per adattare le liste ai tuoi desideri. Informazioni dettagliate su CSS seguiranno in questa serie.
