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

Next lesson: Links in list items

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies