Liste in HTML

Questo è il post #24 di 31 nella serie “HTML 101 - Le basi

Chiariamo subito che liste in HTML5 non sono limitate ad una serie di elenchi puntati o numerati. Ogni volta che abbiamo una serie di liste di “cose”, anche se queste “cose” sono grossi blocchi di contenuto, dovrebbero essere all’interno di una lista di elementi.

É importante ricordare che tutto gira attorno al valore semantico dei tags che usiamo per decorare il nostro contenuto, usare una lista rende esplicitamente chiaro che stiamo enumerando una serie di “cose”.

HTML5 supporta sia l’uso di ordered list (liste ordinate) usando il tag ol così come unorder list (liste non ordinate) usando il tag ul.

In entrambe le liste, l’ordine degli elementi è fisso e definito dall’ordine in cui gli elementi sono inclusi nella lista. La scelta fra un tipo di lista rispetto a un altra è basata sul significato semantico della lista, se l’ordine della lista non è importante, usate una lista non ordinata.

Lo stile di default che un browser applica a una lista non ordinata è quello di aggiungere come prefisso un cerchietto (ci sono diversi tipi). Invece per una lista ordinata, lo stile di default è quello di usare un numero e tutti i numeri sono assegnati in maniera sequenziale.

Vediamo un semplice esempio di lista non ordinata:

Esempio di lista non ordinata

e vediamo un esempio di lista ordinata:

Esempio di lista ordinata

Liste ordinate supportano alcuni interessanti attributi, vediamone alcuni.

L’attributo start indica il numero da usare come primo elemento li.
L’attributo reverse è un attributo boolean che è usato per assegnare numeri in ordine reverso.
L’attributo type specifica il tipo di “numerazione” da usare. Vediamo i valori supportati da questo attributo:

  • 1 — Usa numeri (questo è il valore di default se nessun valore è stato specificato)
  • A — Usa lettere in maiuscolo (esempio A, B, C, D)
  • a — Usa lettere minuscole
  • I — Usa numeri Romani con lettere maiuscole (esempio I, II,III, IV)
  • i — Usa lettere Romane minuscole

Liste ordinate — Mozilla Developer Network
Liste non ordinate — Mozilla Developer Network