HTML and CSS Reference
In-Depth Information
Nesting Lists
One feature that makes lists extremely powerful is their ability to be nested. Every list may
be placed within another list; they can be nested continually. But the potential to nest lists
indefinitely doesn't provide free rein to do so. Lists should still be reserved specifically for
where they hold the most semantic value.
One trick with nesting lists is to know where to begin and end each list and list item. Speak-
ing specifically about unordered and ordered lists, as that is where most nesting will occur,
the only element that may reside directly within the <ul> and <ol> elements is the <li>
element. To repeat, the only element we can place as a direct child of the <ul> and <ol>
elements is the <li> element.
That said, once inside the <li> element, the standard set of elements may be added, in-
cluding any <ul> or <ol> elements.
To nest a list rather than closing a list item, begin a new list (see Figure 8.7 ) . Once the
nested list is complete and closed, close the wrapping list item and continue on with the
original list.
Figure 8.7 An ordered list with a nested unordered list
Click here to view code image
1. <ol>
2. <li>Walk the dog</li>
3. <li>Fold laundry</li>
4. <li>
5. Go to the grocery and buy:
6. <ul>
7. <li>Milk</li>
8. <li>Bread</li>
9. <li>Cheese</li>
10. </ul>
Search WWH ::

Custom Search