Le Liste

Le liste sono un ottimo modo per organizzare i contenuti in una pagina web in modo chiaro e leggibile. L'HTML offre due tipi di liste principali: le liste non ordinate e le liste ordinate.

Liste Non Ordinate (<ul>)

Una lista non ordinata è un elenco di elementi che non seguono un ordine specifico. Ogni elemento della lista è introdotto da un marcatore, come un pallino.

<h4>Esempio di lista non ordinata</h4>
!-- Inizio lista non ordinata -->
<ul>
    <li>Pane</li>
    <li>Latte</li>
    <li>Uova</li>
</ul>
<!-- Fine lista non ordinata -->

Il risultato visibile sarà:

• Pane
• Latte
• Uova

Liste Ordinate (<ol>)

Una lista ordinata è un elenco di elementi che seguono un ordine specifico, come una sequenza numerica o alfabetica. Ogni elemento della lista è introdotto da un numero o una lettera.

<h4>Esempio di lista ordinata</h4>
!-- Inizio lista ordinata -->
<ol>
    <li>Apri il file</li>
    <li>Scrivi il codice</li>
    <li>Salva e visualizza</li>
</ol>
<!-- Fine lista ordinata -->

Il risultato visibile sarà:

1. 1 Apri il file
2. 2 Scrivi il codice
3. 3 Salva e visualizza

Attributi Specifici per le Liste

I tag delle liste in HTML (<ul> e <ol>) possono avere alcuni attributi specifici, utili per modificare la numerazione o lo stile degli elementi.

Liste ordinate (<ol>)

<ol type="A">
    <li>Primo elemento</li>
    <li>Secondo elemento</li>
</ol> <!-- La lista sarà numerata con lettere maiuscole -->

Risultato visibile:

1. A Primo elemento
2. B Secondo elemento

<ol start="5">
    <li>Elemento 5</li>
    <li>Elemento 6</li>
</ol>

Risultato visibile:

5. 5 Elemento 5
6. 6 Elemento 6

<ol reversed>
    <li>Terzo elemento</li>
    <li>Secondo elemento</li>
    <li>Primo elemento</li>
</ol>

Risultato visibile:

1. 3 Terzo elemento
2. 2 Secondo elemento
3. 1 Primo elemento

Liste non ordinate (<ul>)

Le liste non ordinate non hanno attributi specifici in HTML5 per il marcatore, ma lo stile dei pallini o dei simboli può essere modificato tramite CSS.

In HTML puro le liste non ordinate (<ul>) non hanno attributi nativi che permettono di scegliere il tipo di marcatore (pallino, quadratino, spunta, ecc.).

In passato (HTML 4) esisteva l'attributo type su <ul> con valori come disc, circle o square, ma in HTML5 questo attributo è deprecato e non dovrebbe essere usato.

Oggi il modo corretto per modificare i marcatori delle liste non ordinate è tramite CSS, ad esempio:

<ul style="list-style-type: disc;"> <!-- pallino (default) -->
    <li>Pane</li>
    <li>Latte</li>
</ul>

<ul style="list-style-type: circle;"> <!-- cerchio vuoto -->
    <li>Pane</li>
    <li>Latte</li>
</ul>

<ul style="list-style-type: square;"> <!-- quadratino -->
    <li>Pane</li>
    <li>Latte</li>
</ul>

Altri stili piu complessi, come icone personalizzate o spunte, si ottengono con:

<style>
ul li {
    list-style-image: url('spunta.png'); <!-- icona personalizzata -->
}
</style>

Sintesi:

• <ul> non ha attributi nativi per cambiare il marcatore in HTML5.
• Si usa CSS: list-style-type o list-style-image.

Nota: Tutte le liste possono comunque usare attributi globali come id, class, style, title ecc.

<ul>
    <li>Hobby 1</li>
    <li>Hobby 2</li>
    <li>Hobby 3</li>
    <li>Hobby 4</li>
</ul>

<ol type="A" start="3">
    <li>Film 1</li>
    <li>Film 2</li>
    <li>Film 3</li>
</ol> <!-- La lista sarà numerata con lettere maiuscole iniziando da C -->

<ul style="list-style-type: square;">
    <li>Pane</li>
    <li>Latte</li>
</ul>

<div style="border: 1px solid #ccc; padding: 10px; background-color: #f9f9f9; margin: 10px 0;">
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>
</div>

<ol>
    <li>Rock
        <ul>
            <li>Artista 1</li>
            <li>Artista 2</li>
        </ul>
    </li>
    <li>Pop
        <ul>
            <li>Artista 3</li>
            <li>Artista 4</li>
        </ul>
    </li>
</ol>