Una lista non ordinata in HTML ti permette di elencare il contenuto dei tuoi siti web in modo chiaro e senza nu­me­ra­zio­ne. Oltre al tag HTML di base <ul>, gli elementi che entrano in gioco sono il tag per liste <li> e l’attributo type.

Che cosa sono le liste non ordinate in HTML e a cosa servono?

Le liste non ordinate in HTML (in inglese, Unsorted Lists o Unordered Lists) sono elementi HTML che servono a creare liste in cui non è im­por­tan­te l’ordine dei singoli elementi dell’elenco. Queste pratiche liste possono essere in­cor­po­ra­te per mezzo del tag HTML <ul>: un tag di apertura <ul> segna il punto iniziale della lista, mentre l’elemento di chiusura </ul> ne indica il punto finale. I diversi elementi all’interno di una lista non ordinata sono indicati per mezzo del tag per liste HTML <li>, che non ha alcun limite per il numero di punti.

Gli elenchi HTML creati con <ul> sono utili per la vi­sua­liz­za­zio­ne strut­tu­ra­ta di una gran varietà di contenuti, ad esempio:

  • Tipici elenchi di cose da fare: checklist, liste degli in­gre­dien­ti, elenchi di compiti da svolgere
  • Funzioni: elenchi delle ca­rat­te­ri­sti­che di un prodotto o delle pre­sta­zio­ni
  • Link: elenchi di link verso siti esterni o profili su social network
  • Tag: elenco delle parole chiave più in­te­res­san­ti
  • Listini prezzi: pre­sen­ta­zio­ne dei prezzi di servizi o prodotti sotto forma di elenco
  • Scadenze: rap­pre­sen­ta­zio­ne strut­tu­ra­ta delle future scadenze
Consiglio

La con­tro­par­te delle liste non ordinate in HTML sono le liste ordinate in HTML, note in inglese come “Ordered Lists”. Ca­rat­te­ri­sti­ca di queste liste è il fatto che le singole voci dell’elenco sono numerate e, quindi, seguono una gerarchia ben precisa.

Sintassi: il fun­zio­na­men­to del tag <ul> in HTML

Per in­cor­po­ra­re una lista non ordinata in HTML puoi inserirla ovunque desideri all’interno della sezione <body> dei tuoi siti web. Come già accennato, un tag di apertura (<ul>) e uno di chiusura (</ul>) servono a indicare l’inizio e la fine della lista; inoltre puoi con­tras­se­gna­re le singole voci dell’elenco con un tag di apertura < li> e uno di chiusura </li>. Pertanto, la sintassi di base del tag <ul> in HTML si presenta così:

<body>
<ul>
<li>Voce lista 1</li>
<li>Voce lista 2</li>
<li>Voce lista 3</li>
<li>…</li>
</ul>
</body>
html

Poiché in questo caso non sono state fornite in­for­ma­zio­ni spe­ci­fi­che per il simbolo da usare per l’elenco, HTML utilizza il simbolo standard “punto elenco”, ossia il tipico punto centrato rispetto alla riga.

Web Hosting
Miglior Hosting per il tuo sito web o negozio
  • Di­spo­ni­bi­li­tà garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • As­si­sten­za 24/7 in lingua italiana

Liste non ordinate ni­di­fi­ca­te in HTML

Di solito le liste strut­tu­ra­te ge­rar­chi­ca­men­te sono im­ple­men­ta­te in HTML per mezzo di liste ordinate, ma il tag <ul> consente anche di creare una struttura su­bor­di­na­ta delle voci dell’elenco. Per queste liste ni­di­fi­ca­te è suf­fi­cien­te inserire ulteriori elenchi HTML non ordinati all’interno di un elemento <ul> già esistente, come nel seguente esempio che contiene due liste su­bor­di­na­te:

<body>
<p><strong>Lista non ordinata nidificata:</strong></p>
<ul>
    <li>Frutti
        <ul>
            <li>Mele
                <ul>
                    <li>Granny Smith</li>
                    <li>Gala</li>
                    <li>Fuji</li>
                </ul>
            </li>
            <li>Arance
                <ul>
                    <li>Navel</li>
                    <li>Arancia rossa</li>
                    <li>Mandarino</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
html

La categoria prin­ci­pa­le “Frutti” è divisa nelle sot­to­ca­te­go­rie “Mele” e “Arance”, nelle quali sono a loro volta elencate diverse varietà. Per l’utente del browser, il risultato si presenta simile a questo:

Immagine: Esempio di lista HTML non ordinata e nidificata
Nell’esempio sono uti­liz­za­ti con­tem­po­ra­nea­men­te tre diversi elementi `
    `.

Modifica dei simboli elenco per <ul> con list-style-type (con esempi)

Uti­liz­zan­do la proprietà CSS list-style-type, di­spo­ni­bi­le tramite l’attributo HTML style o un foglio di stile esterno, è possibile cambiare in qualsiasi momento i simboli delle liste non ordinate in HTML. Ad esempio, in questo modo puoi impostare i seguenti simboli:

Valore list-style-type De­scri­zio­ne
disc Cerchio pieno; im­po­sta­zio­ne standard in HTML senza in­di­ca­zio­ne style
circle Cerchio vuoto
square Quadrato
none Nessun simbolo elenco

Ad esempio, se desideri uti­liz­za­re un cerchio vuoto, il codice per applicare questa modifica dell’aspetto è il seguente:

<body>
<p><strong>Mele:</strong></p>
<ul style="list-style-type:circle;">
    <li>Granny Smith</li>
    <li>Gala</li>
    <li>Fuji</li>
</ul>
</body
html
N.B.

Per ulteriori opzioni creative e una maggiore riu­ti­liz­za­bi­li­tà del codice, ti con­si­glia­mo di definire CSS se­pa­ra­ta­men­te in un file o nel tag <style> nella sezione <head>. In questo modo ottieni una chiara se­pa­ra­zio­ne tra contenuto e stile, sem­pli­fi­can­do quindi la ma­nu­ten­zio­ne del codice.

Vai al menu prin­ci­pa­le