Just about anything fits in a list, from sets of instructions to collections of links. You can create subcategories by nesting lists within lists. Some common uses for nested lists include the following:
Site maps and other navigation tools
Tables of content for online books and papers
Outlines
You can combine any of the three kinds of lists to create nested lists, such as a multilevel table of contents or an outline that mixes numbered headings with bulleted list items as the lowest outline level.
The following example starts with a numbered list that defines a list of things to do for the day and uses three bulleted lists to break down those items further into specific tasks:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nested Lists</title>
</head>
<body>
<h1>Things to do today</h1>
<ol>
<li>Feed cat
<ul>
<li>Rinse bowl</li>
<li>Open cat food</li>
<li>Mix dry and wet food in bowl</li>
<li>Deliver on a silver platter to Pixel</li>
</ul></li>
<li>Wash car
<ul>
<li>Vacuum interior</li>
<li>Wash exterior</li>
<li>Wax exterior</li>
</ul></li>
<li>Grocery shopping
<ul>
<li>Plan meals</li>
<li>Clean out fridge</li>
<li>Make list</li>
<li>Go to store</li>
</ul></li>
</ol>
</body>
</html>
All nested lists follow the same markup pattern:
Each list item in the top-level ordered list is followed by a complete second-level list.
The second-level lists sit inside the top-level list, not in the list items.
This figure shows how a browser reflects this nesting in its display.
While you build nested lists, watch opening and closing tags carefully. “Close first what you opened last” is an important axiom. If you don’t open and close tags properly, lists might not use consistent indents or numbers, or text might be indented incorrectly because a list somewhere was never properly closed.