A nested list belongs inside the li item it expands. This shows that the child items are a detail of the parent item.
What You Need to Know
Use as few nesting levels as readers need. Deeply nested lists can become hard to scan on small screens.
Example: See It in Action
Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<ul>
<li>Sports
<ul>
<li>Basketball</li>
<li>Running</li>
</ul>
</li>
<li>Music</li>
</ul>Let’s Understand the Example
- Ul groups items where the order does not matter.
- Li is one item inside a list. Keep each item inside its parent list.
You should see distinct list items. Ask whether their order carries meaning: if the order matters, use an ordered list; otherwise use an unordered list.
What Should You See?
The page should include “Sports”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.
Try It Yourself
- Add two child items under Music and check that they stay in the right parent.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Closing the parent li before starting its nested ul.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- A nested list belongs inside the li item it expands.
- Ul groups items where the order does not matter.
- Use as few nesting levels as readers need. Deeply nested lists can become hard to scan on small screens.