<div dir="ltr">Blarg forward to list.<br><br><div class="gmail_quote">---------- Forwarded message ----------<br>From: <b class="gmail_sendername">Tab Atkins Jr.</b> <span dir="ltr"><<a href="mailto:jackalmage@gmail.com">jackalmage@gmail.com</a>></span><br>
Date: Tue, Aug 5, 2008 at 9:15 AM<br>Subject: Re: [whatwg] Nested lists<br>To: noclip <<a href="mailto:noclip@gmail.com">noclip@gmail.com</a>><br><br><br><div dir="ltr"><br><br><div class="gmail_quote"><div><div></div>
<div class="Wj3C7c">On Mon, Aug 4, 2008 at 8:15 PM, noclip <span dir="ltr"><<a href="mailto:noclip@gmail.com" target="_blank">noclip@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
Are there plans to natively support nested unordered lists in HTML 5? I'm referring here to something like this:<br>
<br>
Top level list item<br>
|-- Childless second level list item<br>
|-- Another childless second level list<br>
[+]- Collapsed second level list item with children<br>
[-]- Expanded second level list item with children<br>
| |-- Third level list item<br>
| |-- Another third level list item<br>
| [+]- Collapsed third level list item with children<br>
| [-]- Expanded third level list item with children<br>
| | |-- Fourth level list item<br>
| | |__ Another fourth level list item<br>
| |__ A final third level list item<br>
[+]- Another collapsed second level list item<br>
|__ A final second level list item<br>
<br>
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:<br>
<br>
<nl><br>
<li id="foo">Top level list item</li><br>
<lg parent="foo"><br>
<li>Childless second level list item</li><br>
<li>Another childless second level list item</li><br>
<li id="bar">Collapsed second level list item with children</li><br>
<lg parent="bar"><br>
<!-- Child list items here --><br>
</lg><br>
<li id="three">Expanded second level list item with children</li><br>
<lg parent="three"><br>
<li>Third level list item</li><br>
<li>Another third level list item</li><br>
<li id="four">Collapsed third level list item</li><br>
<lg parent="bar"><br>
<!-- Child list items here --><br>
</lg><br>
<li id="five">Expanded third level list item with children</li><br>
<lg parent="bar"><br>
<li>Fourth level list item</li><br>
<li>Another fourth level list item</li><br>
</lg><br>
<li>A final third level list item</li><br>
</lg><br>
<li id="boo">Another collapsed second level list item</li><br>
<lg parent="boo"><br>
<!-- Child list items here --><br>
</lg><br>
<li>A final second level list item</li><br>
</lg><br>
</nl><br>
<br>
Or you could define the list groups separately, at the beginning or end of the <nl>.</blockquote></div></div><div><br>Could you be more specific about how this is better than just nesting <ul>s? Your example can be organized just as well with:<br>
<ul><br> <li>Foo</li><br> <li><br> <ul><br> <li>Bar</li><br> <li>Baz</li><br>...<br><br>This markup has the added advantage that it'll display a nested list no matter what - it is it's own fallback content if the UA doesn't have appropriate CSS support. Plus it automatically nests appropriately, without the need to specify parents explicitly. As shown in your example, that's somewhat error-prone ( below <li id="five"> you have <lg parent="bar">, which should obviously be <lg parent="five">). ^_^<br>
</div></div></div>
</div><br></div>