[whatwg] Nested lists?

noclip noclip at gmail.com
Mon Aug 4 18:12:49 PDT 2008


Are there plans to natively support nested unordered lists in HTML 5? 
I'm referring here to something like this:

Top level list item
 |-- Childless second level list item
 |-- Another childless second level list
[+]- Collapsed second level list item with children
[-]- Expanded second level list item with children
 |    |-- Third level list item
 |    |-- Another third level list item
 |   [+]- Collapsed third level list item with children
 |   [-]- Expanded third level list item with children
 |    |    |-- Fourth level list item
 |    |    |__ Another fourth level list item
 |    |__ A final third level list item
[+]- Another collapsed second level list item
 |__ A final second level list item

This is already possible through CSS, but these kinds of nested lists 
are more organizational than presentational and could benefit from 
native support with their own kind of unordered list element. The markup 
for the above list could be something like this:

<nl>
   <li id="foo">Top level list item</li>
   <lg parent="foo">
      <li>Childless second level list item</li>
      <li>Another childless second level list item</li>
      <li id="bar">Collapsed second level list item with children</li>
      <lg parent="bar">
         <!-- Child list items here -->
      </lg>
      <li id="three">Expanded second level list item with children</li>
      <lg parent="three">
         <li>Third level list item</li>
         <li>Another third level list item</li>
         <li id="four">Collapsed third level list item</li>
         <lg parent="bar">
            <!-- Child list items here -->
         </lg>
         <li id="five">Expanded third level list item with children</li>
         <lg parent="bar">
            <li>Fourth level list item</li>
            <li>Another fourth level list item</li>
         </lg>
         <li>A final third level list item</li>
      </lg>
      <li id="boo">Another collapsed second level list item</li>
      <lg parent="boo">
         <!-- Child list items here -->
      </lg>
      <li>A final second level list item</li>
   </lg>
</nl>

Or you could define the list groups separately, at the beginning or end 
of the <nl>.



More information about the whatwg mailing list