Le liste numerate sono molto utilizzate nelle pagine web per mostrare una sequenza ordinata di elementi. Sono ideali, ad esempio, per descrivere una procedura passo dopo passo, come la registrazione a un sito, un login oppure una guida all'utilizzo di un servizio.
Per creare una lista numerata si utilizza il tag <ol>, che racchiude l'intero elenco. Ogni elemento della lista viene invece inserito all'interno del tag <li>. Il browser provvederà automaticamente a numerare tutti gli elementi nell'ordine in cui sono stati inseriti.
<h1>Come eseguire il login</h1>
<ol>
<li>Vai alla pagina di login</li>
<li>Inserisci email e password</li>
<li>Clicca ‘Accedi’</li>
</ol>
HTML permette di utilizzare diversi tipi di numerazione. Nel tag <ol> puoi inserire l'attributo type=”valore” per scegliere il formato della numerazione da visualizzare.
Inserendo type=”1”, la lista verrà numerata con i numeri arabi (1, 2, 3...). Questo è il valore predefinito, quindi puoi anche omettere l'attributo type ottenendo lo stesso risultato.
<h1>Come eseguire il login</h1>
<ol type="1">
<li>Vai alla pagina di login</li>
<li>Inserisci email e password</li>
<li>Clicca ‘Accedi’</li>
</ol>
Inserendo type=”a”, la lista verrà numerata con le lettere minuscole (a, b, c...).
<h1>Come eseguire il login</h1>
<ol type="a">
<li>Vai alla pagina di login</li>
<li>Inserisci email e password</li>
<li>Clicca ‘Accedi’</li>
</ol>
Inserendo type=”A”, la numerazione utilizzerà invece le lettere maiuscole (A, B, C...).
<h1>Come eseguire il login</h1>
<ol type="A">
<li>Vai alla pagina di login</li>
<li>Inserisci email e password</li>
<li>Clicca ‘Accedi’</li>
</ol>
Inserendo type=”i”, la lista verrà numerata con i numeri romani minuscoli (i, ii, iii...).
<h1>Come eseguire il login</h1>
<ol type="i">
<li>Vai alla pagina di login</li>
<li>Inserisci email e password</li>
<li>Clicca ‘Accedi’</li>
</ol>
Inserendo type=”I”, la numerazione utilizzerà invece i numeri romani maiuscoli (I, II, III...).
<h1>Come eseguire il login</h1>
<ol type="I">
<li>Vai alla pagina di login</li>
<li>Inserisci email e password</li>
<li>Clicca ‘Accedi’</li>
</ol>