HTML and CSS —

Nesting Lists

Sometimes it's very helpful to have nested lists when using both unordered and ordered lists. A nested list is a list within a list. To create a correctly nested list in XHTML, the trick is to be sure the nest is contained completely within an open and closing list item element (see Example 2-6).

Example 2-6. Nesting an Ordered List Within Another Ordered List
<ol>
<li>Beat eggs, flour, butter and sugar until creamy</li>
<li>Pour into round baking pan</li>
<li>Slowly add and swirl the following ingredients in order:
     <ol>
     <li>Add the chocolate sauce, </li>
     <li>Now, add the cinnamon crunchies, </li>
     <li>Add 1 tsp nutmeg</li>
     </ol>
</li>
<li>Place in oven and bake for 40 minutes</li>
</ol>

Figure 2-6 displays the results.

Figure 2-6. Nesting ordered lists.

You can use a variety of list types in combination when nesting, as follows:

  • Ordered lists within ordered lists

  • Ordered lists within numbered lists

  • Numbered lists within numbered lists

  • Numbered lists within ordered lists

Say you have an ordered list describing your recipe, but the added ingredients are optional rather than sequential (see Example 2-7).

Example 2-7. Combining nested list types
<ol>
<li>Beat eggs, flour, butter and sugar until creamy</li>
<li>Pour into round baking pan</li>
<li>Slowly add and swirl any one or combination of the following ingredients:
     <ul>
     <li>chocolate sauce</li>
     <li>cinnamon crunchies,</li>
     <li>1 tsp nutmeg</li>
     </ul>
</li>
<li>Place in oven and bake for 40 minutes</li>
</ol>

Figure 2-7. Mixed ordered and unordered lists as displayed within a browser.

You'll notice right away that any nested unordered list has an open rather than solid bullet. This is typical default browser behavior. Using CSS, you can modify the numbered and bullet styles for your nested lists.

Beware: Overuse of Nests

Nesting lists can be a great way to get information across to readers quickly and easily, but they can also be overused. If you have a list more than three nests deep and it's not a complex outline, you might want to rethink the approach you're taking in organizing your information.