Nested lists
Nest lists to build hierarchical structures.
What is a nested list?
Sometimes an item needs another list under it. This is called a nested list. The inner list is written by opening a new <ul> or <ol> inside an <li> item.
Example: a library may have 'Programming' with 'Python' and 'JavaScript' under it. The outer list holds the categories, the inner list holds the titles. Paying attention to closing tags matters a lot here.
Indentation and readability
In nested lists, indentation is not just aesthetic — it carries meaning. Writing each level one step in shows which tag is inside which.
A wrong closing tag is the most common mistake in nested lists. Close the inner tag first, then the outer one. The browser ignores wrong indentation, but a wrong closing order breaks the list.
Exercise Write a two-level nested list
Add a nested <ul> list to body. The outer list should have at least two <li> items; the first item should contain an inner <ul> (for example Fruits with Apple and Pear, plus a Vegetables item).
Show example solution
<body>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Pear</li>
</ul>
</li>
<li>Vegetables</li>
</ul>
</body>Test yourself
-
Where is the inner list written in a nested list?
- Inside an <li> tag
- Outside the <ul> tag, as a sibling list
- Inside <body> but fully separate from li
- At the very top, before the first li
Show answer
Inside an <li> tag — Correct. The inner list is opened inside an <li> item; that creates the nesting.
-
Close the inner list
<ul> <li>Animals <ul> <li>Cat</li> <li>Dog</li> ____ </li> </ul>Show answer
<ul> <li>Animals <ul> <li>Cat</li> <li>Dog</li> </ul> </li> </ul> -
Match each scenario to a list type
- Recipe ingredients
- Unordered list (ul)
- Race ranking
- Ordered list (ol)
- Word and meaning
- Description list (dl)
- Menu with sub-items
- Nested list