Il tag <UL> in Html

In questa lezione ti parlo del tag <ul> del linguaggio HTML

<ul> </ul>

Questo tag ti permette di creare degli elenchi non ordinati sul documento ipertestuale (pagina web) ossia una lista di elementi che non hanno un ordine preciso.

Il nome del tag <ul> è l'abbreviazione di "unordered list", ovvero lista non ordinata.

Il tag <ul> è molto utile se devi realizzare un elenco in cui l'ordine delle voci non è importante. Se invece vuoi realizzare un elenco numerato, ti consiglio di usare il tag <ol>.

Ti faccio un esempio pratico.

Ricorda che puoi usare il tag <ul> soltanto nella sezione <body> del documento Html.

<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<ul>
<li>1 pomodoro </li>
<li>50 grammi di olive</li>
<li>2 cucchiai di olio </li>
</ul>
...
</body>
</html>

In questo esempio utilizzi il tag <ul> per creare una lista non ordinata degli ingredienti di una ricetta.

Ogni ingrediente è indicato con il tag <li> che sta per "list item" (elemento della lista).

Il risultato sul browser dell'utente è un elenco puntato

l'elenco puntato

In questo modo la lista degli ingredienti è più intuitiva e facile da leggere.

Per modificare il simbolo usato all'inizio di ogni voce, puoi usare un foglio di stile CSS .

Ad esempio, modifica la pagina in questo modo

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: circle;
margin-left: 20px;
}
</style>
...
</head>
<body>
<ul>
<li>1 pomodoro </li>
<li>50 grammi di olive</li>
<li>2 cucchiai di olio </li>
</ul>
...
</body>
</html>

La proprietà "list-style-type" del foglio di stile CSS ti permette di scegliere il tipo di puntatore da utilizzare per la lista.

none = nessuno
disc = cerchio pieno
circle = cerchio vuoto
square = quadrato
decimal = numeri
lower-roman = numeri romani minuscoli ( i, ii, iii, iv, ... )
upper-roman = numeri romani maiuscoli ( I, II, III, IV, ... )
lower-alpha = lettere minuscole ( a, b, c, d, ... )
upper-alpha = lettere maiuscole ( A, B, C, D, ... )
lower-greek = lettere greche minuscole
...

In questo esempio, stai usando la proprietà "list-style-type" per impostare il tipo di puntatore della lista <ul> su "circle" (cerchio vuoto).

La proprietà "margin-left: 20px;" invece ti permette di impostare il margine sinistro a 20 pixel.

Ora il browser visualizza un cerchio vuoto come puntatore per ogni elemento della lista.

il puntatore è cambiato

Nota. In passato il tag <ul> utilizzava gli attributi type e compact per ottenere gli stessi effetti.

Questi attributi ora sono diventati obsoleti, perché sono stati sostituiti dalle proprietà dei fogli di stile CSS. Gli attributi type e compact sono ancora funzionanti e ben interpretati dai browser moderni ma è preferibile usare il CSS.

A cosa serve il tag <ul>?

Il tag <ul> è molto importante per organizzare i contenuti di una pagina web in modo chiaro e intuitivo, perché una lista è molto più facile da leggere per gli utenti.

Inoltre, il tag <ul> migliora anche l'accessibilità della pagina web, perché gli utenti con disabilità visive o cognitive sono in grado di comprendere meglio i contenuti della tua pagina e di navigare più facilmente tra le informazioni.