Una lista non ordinata in HTML ti permette di elencare il contenuto dei tuoi siti web in modo chiaro e senza numerazione. 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 è importante l’ordine dei singoli elementi dell’elenco. Queste pratiche liste possono essere incorporate 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 visualizzazione strutturata di una gran varietà di contenuti, ad esempio:

  • Tipici elenchi di cose da fare: checklist, liste degli ingredienti, elenchi di compiti da svolgere
  • Funzioni: elenchi delle caratteristiche di un prodotto o delle prestazioni
  • Link: elenchi di link verso siti esterni o profili su social network
  • Tag: elenco delle parole chiave più interessanti
  • Listini prezzi: presentazione dei prezzi di servizi o prodotti sotto forma di elenco
  • Scadenze: rappresentazione strutturata delle future scadenze
Consiglio

La controparte delle liste non ordinate in HTML sono le liste ordinate in HTML, note in inglese come “Ordered Lists”. Caratteristica di queste liste è il fatto che le singole voci dell’elenco sono numerate e, quindi, seguono una gerarchia ben precisa.

Sintassi: il funzionamento del tag <ul> in HTML

Per incorporare 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 contrassegnare 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 informazioni specifiche 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
  • Disponibilità garantita al 99,99%
  • Dominio, SSL ed e-mail inclusi
  • Assistenza 24/7 in lingua italiana

Liste non ordinate nidificate in HTML

Di solito le liste strutturate gerarchicamente sono implementate in HTML per mezzo di liste ordinate, ma il tag <ul> consente anche di creare una struttura subordinata delle voci dell’elenco. Per queste liste nidificate è sufficiente inserire ulteriori elenchi HTML non ordinati all’interno di un elemento <ul> già esistente, come nel seguente esempio che contiene due liste subordinate:

<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 principale “Frutti” è divisa nelle sottocategorie “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 utilizzati contemporaneamente tre diversi elementi `
    `.

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

Utilizzando la proprietà CSS list-style-type, disponibile 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 Descrizione
disc Cerchio pieno; impostazione standard in HTML senza indicazione style
circle Cerchio vuoto
square Quadrato
none Nessun simbolo elenco

Ad esempio, se desideri utilizzare 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 riutilizzabilità del codice, ti consigliamo di definire CSS separatamente in un file o nel tag <style> nella sezione <head>. In questo modo ottieni una chiara separazione tra contenuto e stile, semplificando quindi la manutenzione del codice.

Vai al menu principale