Nesting lists and list items in HTML5

Right now in HTML, it’s only valid to have <li> elements as direct descendants of <ol> and <ul> elements. There’s been some recent buzz (in HTML5) to allow <ol> and <ul> in here, too, since browsers already handle this situation in pretty uniform & predictable ways.

I have a few interrelated issues with this suggestion. One is logical: a list within another list is by definition an item in the parent list and ought to be treated as such. But there’s also been a suggestion that these different structures should have different semantic value; that is, child <ol> & <ul> elements should be treated as if they were part of a “tree” if they aren’t enclosed in an <li> but as part of a sub-list if they are. This is a distinction without a difference, but it’s also a problem, since there’s little to nothing that indicates their difference in almost any (unstyled) rendered context, and therefore it could quickly result in developer confusion (which I’ve seen plenty of on CSS discussion lists). Also, how does the browser decide which kind of nested list to render if the <li> isn’t closed?

Below are some tests that demonstrate this issue, using as little structural markup as practical. The following lists should be using your browser’s default rendering, unless you’ve somehow altered the default styles:

1. A regular item
1. This list is not contained within an <li> element.
2. A regular item
3. Some prefatory text.
   1. This list is contained within an <li> element.
4. And what of a nested list without prefatory text?
5. 1. This list is contained within an <li> element, but the parent <li> has no prefatory text.
1. This list is not contained within an <li> element, although it could be, if I had added a value attribute to it.

• A regular item
• This list is not contained within an <li> element.
• A regular item
• Some prefatory text.
  • This list is contained within an <li> element.
• And what of a nested list without prefatory text?
• • This list is contained within an <li> element, but the parent <li> has no prefatory text.
• Is this a second item in the preceding list, or is it its own thing? View the source to find out.

Anyway, if I haven’t made it clear, I think allowing anything other than <li> as the direct descendant of <ol> & <ul> is a bad idea. Allowing <ol> & <ul> to be children of another list without being enclosed within an <li> provides no clear semantic value (for logical reasons). If lists aren’t actually items in the same list, they shouldn’t all be grouped as if they were.

— Erik Vorhes

(return home)