Corso di HTML / Creare e annidare elenchi con ul, ol e dl

Scegliete ol se l'ordine degli elementi è importante, ul se non importa e dl per nomi associati a descrizioni o valori. Questi elementi descrivono le relazioni tra elementi; i loro numeri e simboli predefiniti servono solo per la rappresentazione.

Quando si dovrebbero usare ol, ul o dl?

Gli elementi in ol e ul utilizzano li. In un dl, dt fornisce un nome e dd fornisce la sua descrizione o il suo valore.

Provate i tre tipi di elenchi nello stesso file

Salvate questo codice come file HTML e apritelo in un browser per confrontare la visualizzazione standard degli elenchi. Il CSS richiede il font Noto Sans KR, se installato; altrimenti il browser utilizzerà un font di riserva senza grazie.

<!doctype html>
<html lang="it-IT">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Liste HTML</title>
    <style>
      body { font-family: "Noto Sans KR", sans-serif; }
    </style>
  </head>
  <body>
    <h1>Preparare un viaggio</h1>
    <h2>Attrezzatura</h2>
    <ul>
      <li>Acqua</li>
      <li>Mappa</li>
    </ul>
    <h2>Passaggi</h2>
    <ol>
      <li>Selezionare le date del viaggio</li>
      <li>Preparare una borsa</li>
    </ol>
    <h2>Termini</h2>
    <dl>
      <dt>Partenza</dt>
      <dd>Il giorno in cui inizia il viaggio</dd>
      <dt>Arrivo</dt>
      <dd>Il giorno in cui si raggiunge la destinazione</dd>
    </dl>
  </body>
</html>

Il CSS può modificare l'indentazione e gli stili dei marker. La distinzione importante è la presenza di un ordine significativo oppure il collegamento fra nomi e descrizioni, espressa tramite HTML.

Modificare la numerazione di un elenco ordinato

Un ol inizia per impostazione predefinita con 1. Il suo attributo start cambia il primo numero; value su un particolare li cambia il numero di questo elemento.

<ol start="5">
  <li>Quinto passo</li>
  <li value="9">Nono passo</li>
  <li>Decimo passo</li>
</ol>

I numeri visualizzati sono 5, 9 e 10. Usate reversed se la numerazione deve procedere al contrario.

<ol reversed>
  <li>Terzo elemento</li>
  <li>Secondo elemento</li>
  <li>Primo elemento</li>
</ol>

Senza un valore iniziale esplicito, questo elenco di tre elementi viene numerato in ordine decrescente: 3, 2, 1. Verificate se la numerazione corrisponde all'ordine previsto.

Gli attributi di numerazione non trasformano una raccolta non ordinata in una sequenza significativa. Scegliete prima il tipo di elenco in base al significato.

Associare nomi e descrizioni con dl

Un dl non è limitato alle definizioni di dizionario. Può collegare una caratteristica del prodotto al suo valore o una data alla sua descrizione. Rendete chiaro il collegamento fra ogni nome dt e la relativa descrizione dd.

<dl>
  <dt>Orari di apertura</dt>
  <dd>Durante la settimana, dalle 9 alle 18</dd>
  <dt>Chiuso</dt>
  <dd>Sabato e domenica</dd>
</dl>

Questi sono orari di apertura fittizi, utilizzati solo per dimostrare l'etichettatura.

Annidare un elenco all'interno di un elemento

Un sottoelenco appartiene all'elemento genitore li che lo sviluppa. Qui, i capi di abbigliamento fanno parte dell'equipaggiamento da viaggio. Consultate la sintassi HTML per la regola di chiudere gli elementi annidati dall'interno verso l'esterno.

<ul>
  <li>Acqua</li>
  <li>Abbigliamento
    <ul>
      <li>Giacca</li>
      <li>Calzini</li>
    </ul>
  </li>
</ul>

Potete anche annidare un ul all'interno di un ol. In questo esempio, i passaggi principali hanno un ordine significativo, ma i due oggetti da mettere in borsa no.

<ol>
  <li>Selezionare le date del viaggio</li>
  <li>Preparare una borsa
    <ul>
      <li>Abbigliamento</li>
      <li>Articoli da toilette</li>
    </ul>
  </li>
  <li>Partire per un viaggio</li>
</ol>

Non posizionate un sottoelenco direttamente sotto un ul o ol esterno; inseritelo all'interno del corrispondente li. Inoltre, evitate di inserire un'intera lista all'interno di un p. Liste e paragrafi sono strutture separate.

Lista di controllo per la creazione di liste

• Decidete se l'ordine degli elementi cambia il significato prima di scegliere ol o ul.
• Utilizzate li per ciascun elemento di un elenco ordinato o non ordinato.
• Chiarite la relazione dt–dd in un elenco di descrizione.
• Inserite un sottoelenco all'interno del suo elemento principale li e utilizzate CSS per l'aspetto del marcatore.

Per ulteriori esempi, consultate la guida MDN sulle liste HTML. Per utilizzare un elenco in un vero insieme di pagine, iniziate dalla struttura dei file in Creare un piccolo sito web multipagina.