I tag <ol>, <ul> e <li>
Per creare una lista ordinata, per numero o per lettera, dobbiamo usare il tag <ol> (ordered list) al cui interno inseriamo un <li> (list item) per ogni elemento della lista.
Usiamo il tag <ol> per elenchi in cui l'ordine delle voci è importante, altrimenti usiamo il tag <ul> (unordered list).
Se vogliamo che l'elenco ordinato non inizi dal numero 1 dobbiamo inserire l'attributo start="n" dove n è il numero da cui vogliamo che l'elenco inizi. Se vogliamo invece cambiare la numerazione di un particolare <li> dobbiamo inserire l'attributo value.
All'interno degli <li> possono comparire vari elementi, sia di testo che immagini.
Gli elenchi sono usati per creare le navigazioni delle pagine web, in particolare gli <ol> sono usati per i breadcrumbs, dove l'ordine in cui compaiono i link è importante, mentre gli <ul> sono usati per le altre barre di navigazione. In questi casi gli <li> contengono dei link alle varie pagine del menu. Gli elenchi possono anche comparire nidificati l'uno dentro l'altro.
<p>Procedimento per fare un toast:</p>
<ol start="5">
<li>Accendere il tostapane</li>
<li>Prendere una fetta di pane</li>
<li>Aggiungere del prosciutto</li>
<li>Aggiungere del formaggio</li>
<li>Coprire con un'altra fetta di pane</li>
<li>Inserire nel tostapane</li>
</ol>
<p>Classifica dei migliori panini:</p>
<ol>
<li>Kebab a pari merito con</li>
<li value="1">Hot Dog</li>
<li>Cheeseburger</li>
<li>Baguette al brie</li>
<li>Toast</li>
<li>Club sandwich</li>
</ol>
<p>Esempio di menu a tre livelli</p>
<nav>
<ul>
<li>Azione
<ul>
<li>Anni 80
<ul>
<li><a href="#">Terminator</a></li>
</ul>
</li>
<li>Anni 90
<ul>
<li><a href="#">Die Hard</a></li>
</ul>
</li>
<li>Anni 00
<ul>
<li><a href="#">Kill Bill</a></li>
</ul>
</li>
</ul>
</li>
<li>Commedia
<ul>
<li>Anni 80
<ul>
<li><a href="#">Al bar dello sport</a></li>
</ul>
</li>
<li>Anni 90
<ul>
<li><a href="#">Tre uomini e una gamba</a></li>
</ul>
</li>
<li>Anni 00
<ul>
<li><a href="#">Mi fido di te</a></li>
</ul>
</li>
</ul>
</li>
<li>Guerra
<ul>
<li>Anni 80
<ul>
<li><a href="#">Full metal jacket</a></li>
</ul>
</li>
<li>Anni 90
<ul>
<li><a href="#">Salvate il soldato Ryan</a></li>
</ul>
</li>
<li>Anni 00
<ul>
<li><a href="#">Zero dark Thirty</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
/* no css */
// no js