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 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