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
Diventa il n°1 della rete con il provider di hosting n°1 in Europa
  • 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