HTML5

In una pagina HTML5 è possibile inserire degli elenchi. Esistono tre tipi di elenchi:

• Elenchi non ordinati
• Elenchi ordinati
• Elenchi definiti

Elenchi non ordinati

Gli elenchi non ordinati sono utilizzati per elencare degli elementi senza un ordine specifico. Ogni elemento dell'elenco è racchiuso tra i tag <li>.

<ul>
  <li>Elemento 1</li>   
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Ecco come apparirà un elenco non ordinato:

• Elemento 1
• Elemento 2
• Elemento 3

La proprietà CSS list-style-type può essere impostata a disc (che ê il valore di default), a circle, a square oppure a none:

• list-style-type: disc;
• list-style-type: circle;
• list-style-type: square;
• list-style-type: none;

Elenchi ordinati

Gli elenchi ordinati sono utilizzati per elencare degli elementi in un ordine specifico. Anche in questo caso, ogni elemento dell'elenco è racchiuso tra i tag <li>.

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

Ecco come apparirà un elenco ordinato:

1. Elemento 1
2. Elemento 2
3. Elemento 3

L'attributo type="1" è quello di default e mostra gli elementi preceduti da un numero, mentre type="A" da una lettera maiuscola e type="a" da una minuscola. Infine type="I" fa precedere ogni elemento della lista da un numero romano in maiuscolo e type="i" in minuscolo, ad esempio:

1. Elemento 1
2. Elemento 2
3. Elemento 3

L'attributo start="14" imposta il valore iniziale dell'elenco, in questo esempio 14 scritto in numeri romani:

14. Elemento 1
15. Elemento 2
16. Elemento 3

Infine l'attributo reversed mostra l'elenco ordinato in ordine decrescente:

1. Elemento 1
2. Elemento 2
3. Elemento 3

Elenchi definiti

Gli elenchi definiti sono utilizzati per elencare termini e definizioni. Ogni termine è racchiuso tra i tag <dt> e ogni definizione tra i tag <dd>.

<dl>
  <dt>Termine 1</dt>
  <dd>Definizione del termine 1</dd>
  <dt>Termine 2</dt>
  <dd>Definizione del termine 2</dd>
</dl>

Ecco come apparirà un elenco definito:

Termine 1

Definizione del termine 1

Termine 2

Definizione del termine 2

Livelli di indentazione negli elenchi

È possibile creare elenchi con più livelli di indentazione annidando gli elenchi all'interno di altri elenchi. Ecco un esempio:

<ul>
  <li>Elemento 1</li>
  <li>Elemento 2
    <ul>
      <li>Sottoelemento 2.1</li>
      <li>Sottoelemento 2.2</li>
    </ul>
  </li>
  <li>Elemento 3</li>
</ul>

Ecco come apparirà un elenco con più livelli di indentazione:

• Elemento 1
• Elemento 2
  • Sottoelemento 2.1
  • Sottoelemento 2.2
• Elemento 3