Creare e Gestire Liste Ordinate e Non Ordinate in HTML5
Benvenuto alla sesta lezione del Corso di HTML5! Nella precedente lezione, Dai Forma al Tuo Testo: I Segreti della Formattazione in HTML5, hai visto come formattare il testo all'interno delle pagine HTML5. L'articolo ha sottolineato come sia importante mostrare i contenuti delle pagine in modo intuivo all'utente e fortemente accessibile. Inoltre, hai visto come dare un significato semantico ai vari elementi della pagina, al fine di aiutare i motori di ricerca ad indicizzare e posizionare al meglio i tuoi contenuti.
In questo articolo spiegheremo un altro elemento fondamentale che sarà sicuramente presente nelle tue pagine HTML5: le liste. Le liste sono uno degli strumenti più utili e versatili nel web design e nello sviluppo web. In HTML5, le liste ci permettono di organizzare e presentare le informazioni in maniera strutturata e leggibile. Questo articolo esplorerà i diversi tipi di liste disponibili in HTML5, come crearle, e come stilizzarle con CSS per migliorare l'aspetto delle nostre pagine web.
Introduzione alle Liste
Le liste sono elementi fondamentali per la presentazione dei
contenuti in una pagina web. Permettono di organizzare le informazioni in
modo chiaro e comprensibile, facilitando la lettura e la navigazione per
l'utente. In HTML5, esistono tre principali tipi di liste: le liste
ordinate, le liste non ordinate e le liste di definizione. In questo
articolo vedremo le prime due liste che utilizzano il tag <li> per
rappresentare ciascun elemento della lista, ma differiscono nel modo in cui
presentano gli elementi.
Liste Non Ordinate (<ul>, <li>)
Le liste non ordinate sono utilizzate quando l'ordine degli elementi non è
rilevante. Queste liste vengono rappresentate con il tag <ul>, che sta per
unordered list (lista non ordinata). Gli elementi della lista sono racchiusi
all'interno del tag <li>, che sta per list item (elemento della lista).
Esempio di Lista Non Ordinata
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Lista Non Ordinata</title>
</head>
<body>
<h1>Frutti Preferiti</h1>
</body>
</html>
In questo esempio, abbiamo creato una lista non ordinata di frutti. Ogni frutto
è un elemento della lista, indicato con il tag <li>.
Stilizzazione Liste Non Ordinate con CSS
Le liste non ordinate possono essere stilizzare con i CSS. In particolare può
essere modificato il marker associato all'elenco puntato. Il marker può
essere modificato attraverso la proprietà list-style-type, impostando i
seguenti valori:
list-style-type: disc; /* cerchietto pieno (valore default) */
list-style-type: circle; /* cerchio vuoto */
list-style-type: square; /* quadrato pieno */
list-style-type: none; /* nessun marker associato */
Esempio di Stilizzazione con CSS
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio di list-style-type</title>
<style>
.default {
list-style-type: disc; /* Marker predefinito */
}
.cerchio-vuoto {
list-style-type: circle; /* Cerchio vuoto */
}
.quadrato {
list-style-type: square; /* Quadrato pieno */
}
.senza-marker {
list-style-type: none; /* Senza marker */
}
</style>
</head>
<body>
<ul class="default">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ul class="cerchio-vuoto">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ul class="quadrato">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ul class="senza-marker">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
</body>
</html>
In questo esempio, abbiamo associato un tipo di marker differente per ogni tipo di lista ordinata.
Liste Ordinate (<ol>, <li>)
Le liste ordinate sono utilizzate quando è importante che gli elementi della
lista seguano un ordine specifico. Queste liste vengono rappresentate con il
tag <ol>, che sta per ordered list (lista ordinata). Anche in questo caso,
gli elementi sono racchiusi nel tag <li>.
Esempio di Lista Ordinata
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Lista Ordinata</title>
</head>
<body>
<h1>Passaggi per Preparare una Ricetta</h1>
<ol>
<li>Preparare gli ingredienti</li>
<li>Cuocere a fuoco medio</li>
<li>Servire caldo</li>
</ol>
</body>
</html>
In questo esempio, abbiamo creato una lista ordinata dei passaggi necessari per preparare una ricetta. Gli elementi sono numerati automaticamente dal browser per riflettere l'ordine.
Stilizzazione Liste Ordinate con CSS
Le liste ordinate possono essere modificate graficamente mediante l'utilizzo del CSS. In particolare, possiamo usare il CSS per modificare il tipo di numerazione da utilizzare nella lista. Possiamo utilizzare i numeri interi, l'alfabeto minuscolo, maiuscolo, ed i numeri romani.
La configurazione del tipo di numerazione sul CSS è impostata dal valore che
attribuiamo alla chiave list-style-type. Possiamo associare i seguenti valori
per ottenere:
list-style-type: decimal; /* numeri arabi */
list-style-type: upper-alpha; /* lettere alfabeto maiuscole */
list-style-type: lower-alpha; /* lettere alfabeto minuscole */
list-style-type: upper-roman; /* numeri romani maiuscoli */
list-style-type: lower-roman; /* numeri romani minuscoli */
Esempio
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio di list-style-type per Liste Ordinate</title>
<style>
.default {
list-style-type: decimal; /* Numeri arabi: 1, 2, 3, ... */
}
.lettere-maiuscole {
list-style-type: upper-alpha; /* Lettere maiuscole: A, B, C, ... */
}
.lettere-minuscole {
list-style-type: lower-alpha; /* Lettere minuscole: a, b, c, ... */
}
.romani-maiuscoli {
list-style-type: upper-roman; /* Numeri romani maiuscoli: I, II, III, ... */
}
.romani-minuscoli {
list-style-type: lower-roman; /* Numeri romani minuscoli: i, ii, iii, ... */
}
</style>
</head>
<body>
<h2>Numerazione Decimale (Predefinita)</h2>
<ol class="default">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
<h2>Lettere Maiuscole</h2>
<ol class="lettere-maiuscole">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
<h2>Lettere Minuscole</h2>
<ol class="lettere-minuscole">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
<h2>Numeri Romani Maiuscoli</h2>
<ol class="romani-maiuscoli">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
<h2>Numeri Romani Minuscoli</h2>
<ol class="romani-minuscoli">
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
</body>
</html>
Nella precedente lista puoi vedere tutte le possibili impostazioni delle liste ordinate tramite CSS.
Attributi liste ordinate
Le liste ordinate di default avviano la loro numerazione dal numero 1. Con
l'attributo start è possibile avviare la numerazione da un numero desiderato.
Se ad esempio volessimo avviare il conteggio dal numero 20, potremmo scrivere
la lista come segue:
<ol start="20">
<li>Elemento numero uno</li>
<li>Elemento numero due</li>
<li>Elemento numero tre</li>
</ol>
Potremmo inoltre avviare una nuova numerazione a partire da un elemento della
lista impostando l'attributo value dell'elemento, come segue:
<ol start="20">
<li>Elemento numero uno</li>
<li>Elemento numero due</li>
<li value="40">Elemento numero tre</li>
<li>Elemento numero quattro</li>
</ol>
Liste Annidate
Le liste annidate sono liste che contengono altre liste al loro interno. Questo è utile per rappresentare strutture gerarchiche o più livelli di informazioni.
Esempio di Liste Annidate
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Liste Annidate</title>
</head>
<body>
<h1>Video del mese</h1>
<ul>
<li>Settimana 40
<ul>
<li>Corso HTML: lezione 1</li>
<li>Corso VIM: lezione 1</li>
</ul>
</li>
<li>Settimana 41
<ul>
<li>Corso HTML: lezione 2</li>
<li>Corso VIM: lezione 2</li>
</ul>
</li>
</ul>
</body>
</html>
In questo esempio, abbiamo creato una lista non ordinata con due elementi principali: Settimana 40 e Settimana 41. Ogni settimana ha una sotto-lista di attività specifiche. Le sotto-liste sono inserite all'interno di elementi della lista principale.
Conclusioni
Le liste in HTML5 sono uno strumento potente per organizzare e presentare le informazioni in modo chiaro e strutturato. Che si tratti di elenchi non ordinati per informazioni generali o di elenchi ordinati per passaggi sequenziali, le liste possono aiutare a migliorare l'usabilità e la leggibilità dei contenuti web. Inoltre, con la stilizzazione tramite CSS, è possibile personalizzare l'aspetto delle liste per adattarle al design complessivo della pagina, offrendo un'esperienza utente più coerente e accattivante.
Utilizzando correttamente le liste, i web designer e gli sviluppatori possono creare pagine web ben strutturate e visivamente piacevoli, migliorando così l'accessibilità e l'efficacia delle informazioni presentate.
