Usiamo continuamente le liste nella nostra vita quotidiana.

Le creiamo per strutturare e organizzare le nostre giornate, e spesso le utilizziamo per fare elenchi di cose da fare. Le usiamo nelle ricette per non dimenticare nessun passaggio e quando vogliamo montare un mobile seguendo le istruzioni.

Questi sono solo alcuni esempi di come le liste ci aiutano a mantenere tutto in ordine.

Perciò, non sorprende che siano una funzionalità così comune e utile anche nello sviluppo web front-end.

In HTML, esistono tre tipi di liste: liste non ordinate, liste ordinate e liste descrittive.

In questo articolo, vedremo come creare una lista non ordinata. Scopriremo anche come personalizzare lo stile predefinito utilizzando poche righe di CSS.

Iniziamo!

Come creare una lista non ordinata in HTML

Le liste non ordinate in HTML sono raccolte di elementi che non richiedono un ordine specifico. Generalmente, si usano dei semplici punti elenco per visualizzare questi elementi.

Per creare una lista non ordinata, utilizziamo il tag ul, mentre per elencare ciascun elemento all'interno della lista usiamo il tag li.

Il tag <ul>, che sta per "unordered list" (lista non ordinata), è il genitore dei tag <li>. Questo significa che ogni <li> è un "figlio" di <ul>.

<ul>
    <li>Elemento</li>
    <li>Altro elemento</li>
    <li>Ancora un altro elemento</li>
</ul>

Risultato:

Questo tipo di elenco viene chiamato "puntato" perché lo stile predefinito prevede che ogni elemento della lista sia accompagnato da un punto.

Un dettaglio importante da ricordare è che <li> è l'unico figlio diretto di <ul>.

Ciò significa che, dopo aver aperto e chiuso i tag <ul>, il primo tag all'interno deve essere un <li>.

Ad esempio, non fare così:

<ul>
    <a href="#">Sono un link a qualcosa sul web!</a>
</ul>

Se desideri che gli elementi della tua lista non ordinata siano dei link, fai invece così:

<ul>
    <li>
        <a href="#">Link a qualcosa sul web!</a>
    </li>
</ul>

In questo caso, il tag <a> è figlio di <li> e, quindi, "nipote" di <ul>.

Come creare una lista annidata non ordinata

Una lista annidata è semplicemente una lista all'interno di un'altra lista.

Puoi creare una lista annidata non ordinata, una lista annidata ordinata o persino una lista annidata ordinata all'interno di una non ordinata.

Ricorda sempre che l'unico figlio diretto del tag <ul> deve essere un <li>.

Ecco come puoi creare una lista annidata non ordinata:

<ul><!-- inizio della lista principale -->
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript
        <ul><!-- inizio della lista annidata -->
            <li>Angular</li>
            <li>React</li>
            <li>Vue</li>
        </ul><!-- fine della lista annidata -->
    </li>
</ul><!-- fine della lista principale -->

Risultato:

Abbiamo creato una lista annidata non ordinata sotto l'elemento della lista principale scelto.

Come puoi vedere nell'esempio, la lista annidata è stata creata all'interno di un elemento della lista principale, che in questo caso è "JavaScript".

Assicurati sempre di aprire e chiudere correttamente i tag, perché può diventare complicato rapidamente.

Un buon consiglio per evitare confusione è aggiungere commenti al codice. E ricorda: usa le liste annidate solo quando ha senso dal punto di vista semantico.

Come personalizzare lo stile predefinito delle liste non ordinate

Come abbiamo visto, lo stile predefinito delle liste non ordinate prevede dei punti elenco accanto a ciascun elemento.

Ma puoi modificare questo stile utilizzando la proprietà list-style-type nel file CSS separato.

Il valore predefinito di questa proprietà è disc.

Come definire lo stile degli elementi della lista usando dei cerchi

Puoi cambiare i punti pieni in cerchi (punti vuoti) utilizzando il seguente codice:

<ul>
    <li>Elemento</li>
    <li>Altro Elemento</li>
    <li>Un Altro Elemento</li>
</ul>

ul {
    list-style-type: circle;
}

Output:

Come definire lo stile degli elementi della lista usando dei quadrati

Puoi anche trasformare i punti in quadrati:

<ul>
    <li>Elemento</li>
    <li>Altro Elemento</li>
    <li>Un Altro Elemento</li>
</ul>

ul {
    list-style-type: square;
}

Output:

Come rimuovere lo stile dagli elementi della lista

È possibile anche rimuovere completamente lo stile:

<ul>
    <li>Elemento</li>
    <li>Altro Elemento</li>
    <li>Un Altro Elemento</li>
</ul>

ul {
    list-style-type: none;
}

Output:

Questa tecnica è particolarmente utile quando vuoi disporre gli elementi della lista in orizzontale, magari per creare una barra di navigazione. Per fare questo, sarà necessario aggiungere qualche regola CSS in più.

Le liste sono elementi di blocco, ma cambiando gli elementi della lista in inline e utilizzando la regola Flexbox, puoi far sì che gli elementi si dispongano uno accanto all'altro.

Con lo stesso HTML di prima:

<ul>
    <li>Elemento</li>
    <li>Altro Elemento</li>
    <li>Un Altro Elemento</li>
</ul>

E aggiungendo qualche regola CSS extra:

ul {
    list-style-type: square;
    display:flex;
}

li{
    display:block;
    margin:10px;
}

Puoi disporre gli elementi della lista in orizzontale:

Come definire lo stile degli elementi della lista usando le emoji

Le possibilità di stile per gli elementi di una lista non ordinata sono abbastanza limitate.

Per rendere le liste più divertenti e originali, puoi aggiungere delle emoji utilizzando il pseudo-elemento ::before in CSS.

Ecco il codice HTML:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Il primo passo è rimuovere il punto elenco predefinito aggiungendo la regola list-style-type: none; al tag <ul> e togliendo il padding e il margin predefiniti.

Successivamente, puoi aggiungere un'emoji a ciascun elemento li della lista tramite il pseudo-elemento ::before.  Puoi scegliere tra una lista completa di emoji in questo articolo.

ul {
    list-style-type: none;
    padding:0;
    margin:0;
}

li::before{
    content: "💻";
}

Output:

Per dare a ciascun elemento della lista una diversa emoji, utilizza il selettore :nth-child() sull'elemento della lista prima del pseudo-elemento ::before:

ul {
    list-style-type: none;
    padding:0;
    margin:0;
}

/*primo elemento della lista*/
li:nth-child(1)::before{
    content: "✍️";
}

/*secondo elemento della lista*/
li:nth-child(2)::before{
    content: "🎨";
}

/*terzo elemento della lista*/
li:nth-child(3)::before{
    content: "🔥";
}

Output:

Conclusioni

Ed eccoci qua! Ora sai come creare liste non ordinate in HTML e hai visto alcuni modi per impostarne lo stile.

Per continuare il tuo percorso di apprendimento HTML, guarda i seguenti video sul canale YouTube di freeCodeCamp:

• HTML Tutorial - Website Crash Course for Beginners (contenuto in inglese)
• HTML Full Course - Build a Website Tutorial  (contenuto in inglese)

freeCodeCamp offre anche una certificazione gratuita basata su progetti su Responsive Web Design.

È ideale per principianti assoluti e non richiede conoscenze precedenti. Inizierai dai fondamenti e costruirai le tue competenze man mano che prosegui. Alla fine, completerai cinque progetti.

Grazie per aver letto e buon proseguimento nello studio :)