The W3 docs have a nested list example prefixed by DEPRECATED EXAMPLE:
, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.
So which of these ways is the correct way to write an HTML list?
Option 1: the nested <ul>
is a child of the parent <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>
Option 2: the nested <ul>
is a child of the <li>
it belongs in
<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>
Option 2 is correct.
The nested list should be inside a <li>
element of the list in which it is nested.
Link to the W3C Wiki on Lists (taken from comment below): HTML Lists Wiki.
Link to the HTML5 W3C ul
spec: HTML5 ul
. Note that a ul
element may contain exactly zero or more li
elements. The same applies to HTML5 ol
.
The description list (HTML5 dl
) is similar, but allows both dt
and dd
elements.
More Notes:
dl
= definition list.ol
= ordered list (numbers).ul
= unordered list (bullets).