HTML Lista ordinata

Esempio

Un elenco ordinato può essere creato con il tag <ol> e ogni elemento di elenco può essere creato con il tag <li> come nell'esempio seguente:

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Questo produrrà un elenco numerato (che è lo stile predefinito):

  1. Articolo
  2. Un altro oggetto
  3. Ancora un altro oggetto

Modifica manuale dei numeri

Ci sono un paio di modi in cui puoi giocare con quali numeri appaiono sugli elementi di lista in un elenco ordinato. Il primo modo è impostare un numero iniziale, usando l'attributo start . L'elenco inizierà da questo numero definito e continuerà ad aumentare di uno come al solito.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

Questo produrrà un elenco numerato (che è lo stile predefinito):

  1. Articolo
  2. Qualche altro oggetto
  3. Ancora un altro oggetto

È inoltre possibile impostare in modo esplicito un determinato elemento di elenco su un numero specifico. Ulteriori elementi dell'elenco dopo uno con un valore specificato continueranno ad aumentare di uno dal valore di quell'elemento dell'elenco, ignorando dove si trovava l'elenco genitore.

<li value="7"></li>

Vale anche la pena notare che, utilizzando l'attributo value direttamente su un elemento della lista, è possibile sovrascrivere il sistema di numerazione esistente di un elenco ordinato riavviando la numerazione ad un valore inferiore. Quindi, se l'elenco genitore aveva già raggiunto il valore 7 e aveva rilevato un elemento di elenco al valore 4, quell'elemento dell'elenco sarebbe ancora visualizzato come 4 e continuerà a contare da quel punto nuovamente.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

Quindi l'esempio sopra produrrà una lista che segue il modello di numerazione di 5, 6, 4, 5, 6 - ricominciando da un numero inferiore al precedente e duplicando il numero 6 nella lista.

Nota: gli attributi start e value accettano solo un numero, anche se l'elenco ordinato è impostato per la visualizzazione come numeri o lettere in caratteri romani.

5

È possibile invertire la numerazione con l'aggiunta di reversed nel vostro ol elemento:

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

La numerazione inversa è utile se si aggiunge continuamente a un elenco, ad esempio con nuovi episodi o presentazioni di podcast e si desidera che vengano visualizzati per primi gli elementi più recenti.


Modifica del tipo di numero

Puoi facilmente cambiare il tipo di numero mostrato nel marcatore dell'elemento di lista usando l'attributo type

<ol type="1|a|A|i|I">
genere Descrizione Esempi
1 Valore predefinito: numeri decimali 1,2,3,4
a Ordine alfabetico (lettere minuscole) a, b, c, d
A Ordine alfabetico (maiuscolo) A, B, C, D
i Numeri romani (lettere minuscole) i, ii, iii, iv
I Numeri romani (maiuscoli) I, II, III, IV

È necessario utilizzare ol per visualizzare un elenco di elementi, in cui gli articoli sono stati ordinati intenzionalmente e l'ordine deve essere enfatizzato. Se la modifica dell'ordine degli articoli NON rende l'elenco errato, devi usare <ul> .