Nested Lists

A nested list is a list inside another list. It represents a hierarchy — a main category with sub-items under it.

The nesting rule

A nested list must be placed inside an <li> element, not directly inside <ul> or <ol>.

Valid — nested list inside <li>:

<ul>
  <li>Clothing
    <ul>
      <li>Moisture-wicking shirt</li>
      <li>Hiking pants</li>
    </ul>
  </li>
  <li>Footwear
    <ul>
      <li>Hiking boots</li>
      <li>Wool socks</li>
    </ul>
  </li>
</ul>

Invalid — nested list directly inside <ul>:

<ul>
  <li>Clothing</li>
  <ul>
    <li>Moisture-wicking shirt</li>
  </ul>
</ul>

In the invalid example, the inner <ul> is a direct child of the outer <ul>. That is incorrect — a <ul> can only contain <li> elements as direct children.

Nested ordered list

The same rule applies to <ol>:

<ol>
  <li>Prepare your gear
    <ol>
      <li>Lay everything out the night before</li>
      <li>Check each item against your list</li>
    </ol>
  </li>
  <li>Head to the trailhead</li>
  <li>Sign the trail register</li>
</ol>

Mixed nesting

You can mix <ul> and <ol> freely. A <ul> can contain a nested <ol> and vice versa:

<ul>
  <li>Pre-hike checklist
    <ol>
      <li>Check the forecast</li>
      <li>Fill water bottles</li>
      <li>Pack snacks</li>
    </ol>
  </li>
  <li>Emergency contacts
    <ul>
      <li>Park ranger station</li>
      <li>Trail rescue hotline</li>
    </ul>
  </li>
</ul>

Use the type that fits the sub-items — ordered when the sub-steps have a sequence, unordered when they do not.

Indentation matters

Proper indentation makes nested lists readable. Each level of nesting adds one indent:

<ul>
  <li>Level 1
    <ul>
      <li>Level 2</li>
      <li>Level 2
        <ul>
          <li>Level 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Deep nesting (three or more levels) is rarely needed. If you find yourself at three levels, reconsider whether the content could be structured differently.

Exercise

Open index.html in VS Code.

Find the unordered list you added in Lesson 01 (the <ul> inside one of your <section> elements).

Expand one of its <li> items by adding a nested <ul> with two or three sub-items inside that <li>:

<ul>
  <li>Clothing
    <ul>
      <li>Lightweight, moisture-wicking shirt</li>
      <li>Convertible hiking pants</li>
    </ul>
  </li>
  <li>Footwear</li>
  <li>Navigation</li>
</ul>

Steps:

1. Pick one <li> in your existing <ul>.
2. Inside that <li> (after the text), open a new <ul>.
3. Add two or three <li> sub-items.
4. Close the inner </ul>, then close the outer </li>.
5. Make sure indentation is consistent — VS Code’s Format Document (Shift+Alt+F) can help.
6. Save and open in your browser. The sub-items should appear indented under their parent item.

Recap

• A nested list is a <ul> or <ol> placed inside an <li>, never directly inside the outer list.
• You can mix <ul> and <ol> in any combination.
• Proper indentation keeps nested lists readable.
• Avoid nesting more than two or three levels deep — it usually means the content structure needs rethinking.