Html: gli elenchi | HTML Tutorial

Html: gli elenchi


Scrivere una lista non numerata


L’elenco non numerato si scrive 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 punto della lista</li>
   <li>Secondo punto della lista</li>
   <li>Terzo punto della lista</li>
</ul>

Produce:

  • Primo punto della lista
  • Secondo punto della lista
  • Terzo punto della lista


Scrivere una lista non numerata annidata


Gli elenchi puntati possono anche essere annidati gli uni dentro gli altri.

Per esempio, se volessi inserire un elenco ordinato nella seconda riga di un elenco non ordinato, dovrei usare un codice di questo tipo:

<ul>
   <li>Prima riga dell'elenco "esterno"
   <ol>
   <li>Prima riga dell'elenco "interno"  
   <li>Seconda riga dell'elenco "interno"
   <li>Terza riga dell'elenco "interno"
   <li>Quarta riga dell'elenco "interno"
   <ol>
   <li>Terza riga dell'elenco "esterno"
</ul>

Produce:

  • Prima riga dell'elenco "esterno"
    1. Prima riga dell'elenco "interno"
    2. Seconda riga dell'elenco "interno"
    3. Terza riga dell'elenco "interno"
    4. Quarta riga dell'elenco "interno"
  • Terza riga dell'elenco "esterno"


Scrivere una lista numerata


L’elenco non numerato si scrive utilizzando il tag <ol>. Al suo interno possiamo inserire gli elementi della lista (list item) utilizzando il tag <li>. Ecco un semplice esempio:

<ol>
   <li>Primo punto della lista</li>
   <li>Secondo punto della lista</li>
   <li>Terzo punto della lista</li>
</ol>

Produce:

  1. Primo punto della lista
  2. Secondo punto della lista
  3. Terzo punto della lista


Scrivere una lista usando gli attributi type e start


Entrambi i tipi di elenco supportano l'attributo type, che permette di specificare il tipo di elenco, mentre gli elenchi ordinati supportano anche l'attributo start, che permette di far partire l'elenco dal numero o lettera che si desidera.

L'attributo type supporta i seguenti valori:

  • A - visualizza l'elenco alfabetico con lettere maiuscole
  • a - visualizza l'elenco alfabetico con lettere minuscole
  • I - visualizza l'elenco con i numeri romani maiuscoli
  • i - visualizza l'elenco con i numeri romani minuscoli
  • 1 - visualizza l'elenco con i numeri arabiEcco un semplice esempio:

L'attributo start invece determina da che numero (o lettera) parte l'elenco.

Vediamo un esempio che comprenda sia type che start all'interno di un elenco ordinato:

<ol type="1" start="5">
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
</ol>

Produce:

  1. Bla, bla, bla...
  2. Bla, bla, bla...
  3. Bla, bla, bla...

Invece il codice:

<ol type="A" start="1">
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
  <li>Bla, bla, bla...</li>
</ol>

Produce:

  1. Bla, bla, bla...
  2. Bla, bla, bla...
  3. Bla, bla, bla...


Liste di definizione


Un tipo particolare di elenco HTML è dato dalle liste di definizione. Gli elenchi di questo tipo sono aperti dal tag HTML <dl> (definition list), mentre gli elementi sono composti ciascuno da due tag: <dt> (definition term) e <dd> (definition description).

Ciascun elemento della lista di definzione, quindi, è definito da due tag: col primo si identifica il termine che si vuole definire (dt), col secondo si da la definzione (dd).

Vediamo una lista di definizione con un esempio, il codice HTML: 

<dl>
  <dt>HTML</dt>
  <dd>Linguaggio di markup ipertestuale</dd>
  <dt>PHP</dt>
  <dd>Linguaggio lato server per la creazione di siti web dinamici</dd>
</dl>

Produce:

HTML
Linguaggio di markup ipertestuale
PHP
Linguaggio lato server per la creazione di siti web dinamici