Elenchi

Ultima modifica: 13/07/12

Esistono 3 tipi di elenchi:

Come vedrete spiegato in questa pagina, nei primi due è possibile cambiare l'aspetto grafico del simbolo associato all'elemento elencato sfruttando l'attributo type. Tale attributo si può utilizzare se si sta scrivendo in un blog, o se si vogliono fare delle modifiche momentanee sul codice HTML di una pagina sul web, ma non in pagine create da voi da zero. Infatti questo attributo è deprecato dal W3C, è preferibile utilizzare i CSS.

Elenchi non ordinati

Gli elenchi non ordinati sono quelli in cui gli elementi vengono semplicemente elencati senza uno specifico ordine. Il tipo di elenco non ordinato più utilizzato è quello che spesso viene chiamato elenco puntato (per distinguerlo dall'elenco numerato) ed è rappresentato da un pallino pieno.

Il tag che individua gli elenchi non ordinati è <ul> (che sta appunto per unordered list). All'interno del blocco contraddistinto da <ul> vanno inseriti i vari elementi dell'elenco, ed essi sono individuati dal tag <li>.

<ul>
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
  ...
</ul>

Al posto del pallino pieno è possibile creare degli elenchi non ordinati con altri simboli come il pallino vuoto e il quadratino pieno. Per farlo basta aggiungere al tag <ul> l'attributo type e attribuirgli il valore circle per il pallino vuoto e square per il rettangolo pieno. In realtà esiste un valore per l'attributo type anche per il pallino pieno: disc, ma è più semplice utilizzare il tag <ul> senza attributi.

Simbolo Valore attributo type Codice Visualizzazione
pallino pieno type="disc"

o nessuno (preferibile)

 
<ul type="disc">
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ul>

oppure (preferibile)

<ul>
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ul>
  • 1° elemento
  • 2° elemento
  • 3° elemento
pallino vuoto type="circle" 
<ul type="circle">
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ul>
  • 1° elemento
  • 2° elemento
  • 3° elemento
quadratino pieno type="square" 
<ul type="square">
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ul>
  • 1° elemento
  • 2° elemento
  • 3° elemento

È possibile anche creare degli elenchi annidati, cioè degli elenchi all'interno di un elenco.

Esempio

Codice Visualizzazione 
<ul>
  <li>esseri non viventi</li>
  <li>esseri viventi</li>
    <ul>
      <li>animali</li>
        <ul>
          <li>vertebrati</li>
          <li>invertebrati</li>
        </ul>
      <li>vegetali</li>
    </ul>
</ul>
  • esseri non viventi
  • esseri viventi
    • animali
      • vertebrati
      • invertebrati
    • vegetali

Elenchi ordinati

Gli elenchi ordinati sono quelli in cui gli elementi vengono elencati secondo un certo ordine. Il tipo di elenco ordinato più utilizzato è quello che spesso viene chiamato elenco numerato (per distinguerlo dall'elenco puntato) ed è rappresentato da dei numeri.

Il tag che individua gli elenchi ordinati è <ol> (che sta appunto per ordered list). All'interno del blocco contraddistinto da <ol> vanno inseriti i vari elementi dell'elenco, ed essi sono individuati sempre dal tag <li>.

<ol>
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
  ...
</ol>

Al posto dei numeri è possibile creare degli elenchi ordinati con lettere o numeri romani. Per farlo basta aggiungere al tag <ul> l'attributo type e attribuirgli diversi valori. Con il valore a l'elenco sarà individuato da lettere minuscole, con A da lettere maiuscole, con i da numero romani minuscoli e con I da numeri romani maiuscoli. In realtà esiste un valore per l'attributo type anche per le lettere: 1, ma è più semplice utilizzare il tag <ol> senza attributi.

Simbolo Valore attributo type Codice Visualizzazione
numeri type="1"

o nessuno (preferibile)

 
<ol type="disc">
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ol>

oppure (preferibile)

<ol>
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ol>
  1. 1° elemento
  2. 2° elemento
  3. 3° elemento
lettere minuscole type="a" 
<ol type="a">
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ol>
  1. 1° elemento
  2. 2° elemento
  3. 3° elemento
lettere maiuscole type="A" 
<ol type="A">
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ol>
  1. 1° elemento
  2. 2° elemento
  3. 3° elemento
numeri romani minuscoli type="i" 
<ol type="i">
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ol>
  1. 1° elemento
  2. 2° elemento
  3. 3° elemento
numeri romani maiuscoli type="I" 
<ol type="I">
  <li>1° elemento</li>
  <li>2° elemento</li>
  <li>3° elemento</li>
</ol>
  1. 1° elemento
  2. 2° elemento
  3. 3° elemento

L'elenco può anche iniziare da un numero o una lettera particolari, per far ciò basta inserire nel tag <ol> l'attributo start e come valore attribuirgli il numero che corrisponde alla lettera o al numero da cui si vuole fare iniziare l'elenco.

Esempio

Codice Visualizzazione 
<ol start="6">
  <li>Pio</li>
  <li>Ugo</li>
  <li>Ivo</li>
</ol>
  1. Pio
  2. Ugo
  3. Ivo
 
<ol type="A" start="6">
  <li>Pio</li>
  <li>Ugo</li>
  <li>Ivo</li>
</ol>
  1. Pio
  2. Ugo
  3. Ivo

Liste di definizione

Le liste di definizione sono elenchi di termini seguiti da una descrizione o testo che li riguarda.

Il tag che individua le liste di definizione è <dl>. A differenza delle liste ordinate e di quelle non ordinate, in questo tipo di lista gli elementi sono individuati da due tag:

<dl>
  <dt>1° termine</dt>
  <dd>descrizione 1° termine</dd>
  <dt>2° termine</dt>
  <dd>descrizione 2° termine</dd>    
</dl>

Esempio

Codice Visualizzazione 
<dl>
  <dt>Berlino</dt>
  <dd>Capitale della Germania</dd>
  <dt>Stoccolma</dt>
  <dd>Capitale della Svezia</dd>
  <dt>Berna</dt>
  <dd>Capitale della Svizzera</dd>
</dl>
Berlino
Capitale della Germania
Stoccolma
Capitale della Svezia
Berna
Capitale della Svizzera
Condividi su Facebook