Per annidare correttamente gli elenchi HTML, inserisci ogni sottoelenco nell’elemento dell’elenco a cui appartiene, prima del tag di chiusura di quell’elemento. Questa guida mostra come creare, salvare e visualizzare in anteprima un esempio a tre livelli usando TextEdit e Safari su un Mac.

Dove va inserito un elenco HTML annidato?

Un elenco HTML ha due parti strutturali: un contenitore e i suoi elementi. Usa <ul> per un elenco non ordinato e <ol> per un elenco ordinato. Ogni elemento normale è racchiuso tra <li> e </li>. Un elenco annidato va inserito all’interno di uno di questi elementi. La guida di Google sugli elenchi mostra esattamente questo schema di annidamento.

La sequenza essenziale è: apri l’elemento padre, scrivi la sua etichetta, inserisci il sottoelenco completo e poi chiudi l’elemento padre. Lasciare visibile il tag di chiusura rende più facile verificare la relazione.

Questo frammento HTML corretto assegna due elementi figlio al Gruppo A, mantenendo il Gruppo B al livello esterno:

<ul>
  <li>Group A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
    </ul>
  </li>
  <li>Group B</li>
</ul>

Leggi i tag di chiusura dall’interno verso l’esterno. Per prima cosa si chiude ciascun elemento figlio. Poi si chiude l’elenco interno con </ul>. Quindi si chiude il Gruppo A con </li>. Solo a quel punto inizia il Gruppo B. Ecco un controllo pratico: individua i tag di apertura e chiusura dell’elemento padre e verifica che l’intero sottoelenco si trovi tra di essi.

Lo standard HTML consente agli elementi <li> di contenere contenuti di flusso, tra cui gli elenchi. Il modello di contenuto di <ul> e <ol> ammette elementi dell’elenco ed elementi di supporto agli script; non consente invece di inserire direttamente un altro contenitore di elenco nel contenitore esterno. Consulta le definizioni di contenuto raggruppato dello standard HTML.

Scegli separatamente il tipo di elenco per ogni livello

Chiediti se cambiare l’ordine degli elementi ne cambierebbe il significato. Se sì, scegli <ol>. Se gli elementi sono una raccolta il cui significato non dipende dalla sequenza, scegli <ul>. Applica questa domanda a ogni sottoelenco, indipendentemente dagli altri. La documentazione di Mozilla sugli elenchi ordinati spiega sia il criterio dell’ordine sia la combinazione di tipi di elenco.

Nell’esempio seguente, il Gruppo A e il Gruppo B sono categorie neutre, quindi il loro elenco esterno è non ordinato. Anche l’Elemento A1 e l’Elemento A2 formano una raccolta non ordinata. Sotto l’Elemento A2, l’apertura di un documento di esempio precede la sua ridenominazione, quindi queste due istruzioni usano un elenco ordinato.

Relazione tra i contenuti Tipo di elenco Posizione
Una raccolta di gruppi <ul> Intorno agli elementi dei gruppi
Elementi appartenenti al Gruppo A <ul> All’interno del <li> del Gruppo A
Una sequenza appartenente all’Elemento A2 <ol> All’interno del <li> dell’Elemento A2
Elementi appartenenti al Gruppo B <ul> All’interno del <li> separato del Gruppo B

Passare dai punti ai numeri non richiede una tecnica di annidamento diversa. L’elemento padre racchiude comunque l’intero elenco figlio. La documentazione di Mozilla supporta esplicitamente l’annidamento di elenchi ordinati e non ordinati a più livelli. Note sull’uso degli elenchi ordinati

Crea in TextEdit un documento completo con elenchi annidati

L’esempio seguente è un documento HTML completo. Usa etichette fittizie e non richiede risorse scaricate né codice aggiuntivo. La sua struttura contiene quattro elenchi e otto elementi: due gruppi esterni, quattro elementi distribuiti tra i gruppi e due istruzioni sotto l’Elemento A2.

In TextEdit, scegli File > New, quindi Format > Make Plain Text. Incolla l’esempio completo riportato sotto. Apple documenta questo flusso di lavoro in testo semplice per creare file HTML nella guida di TextEdit per HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample workspace outline</title>
</head>
<body>
  <h1>Sample workspace outline</h1>
  <ul>
    <li>Group A
      <ul>
        <li>Item A1</li>
        <li>Item A2
          <ol>
            <li>Open the sample document.</li>
            <li>Rename the sample document.</li>
          </ol>
        </li>
      </ul>
    </li>
    <li>Group B
      <ul>
        <li>Item B1</li>
        <li>Item B2</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Scegli File > Save, assegna al file il nome nested-lists.html e salvalo in un posto facile da trovare. Se TextEdit ti chiede quale estensione usare, scegli Use .html. Questi sono i passaggi documentati da Apple per salvare file HTML. Copia solo il codice all’interno del blocco delimitato; ometti le righe con i delimitatori Markdown.

Nel Finder, seleziona il file salvato e scegli File > Open With > Safari. Apple spiega come selezionare un’applicazione tramite File > Open With nella guida Scegliere un’app per aprire un file su Mac.

Confronta l’anteprima con queste relazioni attese:

  • Il Gruppo A e il Gruppo B sono elementi fratelli al livello esterno.
  • L’Elemento A1 e l’Elemento A2 appartengono al Gruppo A.
  • Le due istruzioni numerate appartengono solo all’Elemento A2.
  • L’Elemento B1 e l’Elemento B2 appartengono al Gruppo B.

Verifica queste relazioni anche nel codice sorgente, oltre che nella visualizzazione. I tag espliciti dell’esempio e le relazioni tra gli elenchi e i rispettivi elementi genitori sono stati controllati programmaticamente; qui non è stata verificata la resa in Safari.

Individua un sottoelenco associato all’elemento sbagliato

Usa la sequenza seguente quando un documento esistente contiene le parole giuste ma ha una gerarchia errata. Procedi un elemento padre e i suoi figli immediati alla volta, iniziando dall’elenco esterno.

1. Trova un elemento padre che si chiude troppo presto

Questo frammento errato chiude il Gruppo A prima che inizi il suo sottoelenco:

<ul>
  <li>Group A</li>
  <ul>
    <li>Item A1</li>
  </ul>
</ul>

Qui il <ul> interno è un figlio diretto del <ul> esterno. Sposta </li> del Gruppo A sotto </ul> interno, in modo che l’elemento padre racchiuda il sottoelenco. Questa correzione segue la regola di posizionamento illustrata nell’esempio di elenco annidato di Google.

2. Controlla se la struttura è valida ma l’elemento padre è sbagliato

Un elenco può rispettare le regole di annidamento e descrivere comunque la relazione sbagliata. Per esempio, inserendo le istruzioni numerate nell’Elemento A1 le assoceresti a quest’ultimo, anche se l’etichetta prevista era Elemento A2. La sintassi corretta da sola non determina il raggruppamento desiderato.

Per ogni sottoelenco, chiediti: «Il tag di apertura di quale elemento racchiude l’intero elenco?» Confronta l’etichetta di quell’elemento con quella del genitore previsto. Nell’esempio completo, risalendo dalle istruzioni numerate dovresti arrivare all’Elemento A2 e poi al Gruppo A. Se raggiungi un’altra etichetta, sposta il sottoelenco completo prima di modificarne l’aspetto.

3. Rendi espliciti i tag di chiusura durante le modifiche

In specifiche condizioni, tra cui il caso in cui subito dopo segua un altro elemento, HTML consente di omettere il tag di chiusura </li> di un elemento. Non è necessario ricorrere a questa forma abbreviata. Quando impari o correggi l’annidamento, scrivi tutti i tag di chiusura degli elementi, così ogni confine resta visibile. Mozilla elenca le condizioni precise per l’omissione nel suo riepilogo tecnico degli elementi di elenco.

Usa un’indentazione coerente come aiuto durante le modifiche: indenta un elenco figlio sotto l’etichetta del suo elemento padre e allinea i tag di apertura e chiusura degli elenchi corrispondenti. Poi controlla i confini effettivi dei tag. L’indentazione rende più facile leggere la relazione prevista; sono gli elementi contenitori a stabilirla.

4. Mantieni gli elementi paragrafo entro i propri confini

Se l’etichetta di un elemento padre richiede un paragrafo, chiudi quel paragrafo prima di aprire il sottoelenco, mantenendo entrambi all’interno dell’elemento padre. Lo standard HTML specifica che i contenitori degli elenchi non possono essere figli di elementi <p>. Regole sui contenuti dei paragrafi in HTML

Questo frammento valido mantiene insieme il paragrafo dell’etichetta e l’elenco figlio all’interno del Gruppo A:

<ul>
  <li>
    <p>Group A</p>
    <ul>
      <li>Item A1</li>
    </ul>
  </li>
</ul>

Riapri il codice sorgente e mantieni la gerarchia durante le modifiche

Se riaprendo il file in TextEdit vedi contenuti formattati invece dei tag, scegli File > Open, seleziona il file, fai clic su Show Options, seleziona Ignore rich text commands e fai clic su Open. Per i file futuri, Apple fornisce anche TextEdit > Settings > Open and Save e l’opzione Display HTML files as HTML code instead of formatted text. Visualizzare HTML come codice in TextEdit

Quando sposti un elemento, sposta il suo blocco <li> completo, compresi gli eventuali sottoelenchi. Per esempio, per spostare l’Elemento A2 devi portare con te le sue due istruzioni. Spostare solo l’etichetta lascerebbe indietro le istruzioni e modificherebbe il raggruppamento previsto nel documento.

Prima di salvare una revisione, controlla tre cose: ogni elenco figlio è racchiuso nell’elemento padre previsto; gli elementi fratelli mantengono l’ordine richiesto; e ogni elenco usa punti o numeri a seconda che la sequenza sia importante. Salva il file, riaprilo in Safari e confronta i gruppi visualizzati con lo schema previsto. Mantenere ogni elemento padre insieme al suo intero sottoalbero facilita la verifica delle modifiche future.

Fonti