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:
e vediamo un 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