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>
Nesting Lists is the process of putting each item within a list. If a list A is the list item of another list B, then list A would be called a nested list. In HTML, to implement nested lists, the code to be used is as follows: <ul> <li>Item A</li>.
In HTML, we can create an ordered list using the <ol> tag. The ol in the tag stands for an ordered list. Inside each of the ordered list elements <ol> and <ol /> , we have to define the list items. We can define the list items using the <li> tag.
Note: The <ul> attributes are not supported by HTML5. Example: This example shows a nested unordered list. It is used to nest the list items i.e list inside another list.
Creating Nested Lists in HTML We can create an ordered list with the ol tag and an unordered list with the ul tag. Inside these tags, we use the li tag to create the list of items. There will be cases when we have to make a list of items inside another list of items.
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).Official W3C link (updated).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With