I documenti W3 hanno un esempio di elenco nidificato preceduto da DEPRECATED EXAMPLE:, ma non lo hanno mai corretto con un esempio non deprecato, né hanno spiegato esattamente cosa non va nell'esempio.

Quindi quale di questi modi è il modo corretto di scrivere un elenco HTML?

Opzione 1 : il nidificato <ul>è un figlio del genitore<ul>

<ul>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ul>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
    </ul>
    <li>Final list item</li>
</ul>

Opzione 2 : il nidificato <ul>è figlio del <li>quale appartiene

<ul>
    <li>List item one</li>
    <li>List item two with subitems:
        <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
        </ul>
    </li>
    <li>Final list item</li>
</ul>

L'opzione 2 è corretta.

L'elenco nidificato dovrebbe essere all'interno di un <li>elemento dell'elenco in cui è nidificato.

Link al Wiki su Elenchi del W3C (tratto dal commento seguente): HTML Elenchi Wiki .

Link alle ulspecifiche HTML5 W3C : HTML5ul . Si noti che un ulelemento può contenere esattamente zero o più lielementi. Lo stesso vale per HTML5ol . L'elenco delle descrizioni ( HTML5dl ) è simile, ma consente sia gli elementi dtche gli ddelementi.

Altre note:

• dl = elenco definizioni.
• ol = elenco ordinato (numeri).
• ul = elenco non ordinato (punti elenco).

opzione 2

<ul>
<li>Choice A</li>
<li>Choice B
  <ul>
    <li>Sub 1</li>
    <li>Sub 2</li>
  </ul>
</li>
</ul>

Elenchi di nidificazione - UL

L'opzione 2 è corretta: il nidificato <ul>è figlio del <li>quale appartiene.

Se convalidi , l'opzione 1 viene visualizzata come errore in HTML 5 - credito: user3272456

Corretto: <ul>come figlio di<li>

Il modo corretto di creare un elenco nidificato HTML è con il nidificato <ul>come figlio del <li>quale appartiene. L'elenco nidificato dovrebbe trovarsi all'interno <li>dell'elemento dell'elenco in cui è nidificato.

<ul>
    <li>Parent/Item
        <ul>
            <li>Child/Subitem
            </li>
        </ul>
    </li>
</ul>

Standard W3C per gli elenchi di nidificazione

Una voce di elenco può contenere un altro intero elenco, noto come "annidamento" di un elenco. È utile per cose come i sommari, come quello all'inizio di questo articolo:

1. Capitolo primo
   1. Sezione prima
   2. Sezione due
   3. Sezione tre
2. Capitolo due
3. Capitolo tre

La chiave per gli elenchi di nidificazione è ricordare che l'elenco nidificato deve essere correlato a un elemento dell'elenco specifico. Per riflettere ciò nel codice, l'elenco nidificato è contenuto all'interno di tale elemento dell'elenco. Il codice per l'elenco sopra è simile al seguente:

<ol>
  <li>Chapter One
    <ol>
      <li>Section One</li>
      <li>Section Two </li>
      <li>Section Three </li>
    </ol>
  </li>
  <li>Chapter Two</li>
  <li>Chapter Three  </li>
</ol>

Notare come l'elenco nidificato inizia dopo <li>e il testo dell'elemento dell'elenco contenente ("Capitolo Uno"); quindi termina prima </li>dell'elemento dell'elenco contenente. Gli elenchi nidificati spesso costituiscono la base per i menu di navigazione del sito Web, in quanto rappresentano un buon modo per definire la struttura gerarchica del sito Web.

Teoricamente puoi annidare tutte le liste che vuoi, anche se in pratica può diventare confuso annidare le liste troppo in profondità. Per elenchi molto grandi, potresti preferire suddividere il contenuto in più elenchi con intestazioni o addirittura dividerlo in pagine separate.

Se convalidi, l'opzione 1 viene visualizzata come errore in HTML 5, quindi l'opzione 2 è corretta.

Preferisco l'opzione due perché mostra chiaramente l'elemento della lista come possessore di quella lista nidificata. Mi spingerei sempre verso un HTML semanticamente valido.

Hai pensato di utilizzare il tag "dt" invece di "ul" per le liste di nidificazione? Lo stile e la struttura ereditari ti consentono di avere un titolo per sezione e tabula automaticamente il contenuto all'interno.

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

VS

<ul>
   <li>Choice A</li>
   <li>Choice B
      <ul>
         <li>Sub 1</li>
         <li>Sub 2</li>
      </ul>
   </li>
</ul>

Ciò che non è menzionato qui è che l'opzione 1 ti consente di annidare arbitrariamente in profondità gli elenchi.

Questo non dovrebbe importare se controlli il contenuto / CSS, ma se stai realizzando un editor di testo avanzato, sarà utile.

Ad esempio, Gmail, Posta in arrivo ed evernote consentono tutti di creare elenchi come questo:

Con l'opzione 2 non puoi farlo (avrai una voce di elenco in più), con l'opzione 1, puoi.