📋 Phase 4 · Lists🟢 BeginnerMODULE 13

Nested Lists

⏱️ 13 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress37%

🎯 What you'll learn: How to put a list inside a list item to build outlines, multi-level menus, and hierarchical content — plus the one nesting mistake almost every beginner makes.

Section 1

The Core Rule: Nest Inside the <li>

To nest a list, place the new <ul> or <ol> inside an <li> — never as a direct sibling of other <li> elements. The nested list becomes a sub-point of that specific item.

nested-basic.html

HTML

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Databases</li>
    </ul>
  </li>
</ul>

Frontend
- HTML
- CSS
- JavaScript
Backend
- Node.js
- Databases

⚠️

The most common beginner mistake

Placing a <ul> as a sibling of <li> elements — directly inside the parent <ul> but outside any <li> — is invalid HTML. Browsers try to recover, but the result is unpredictable. Always nest inside an <li>.

Section 2

Mixing List Types

Ordered and unordered lists can nest inside each other freely — a numbered outline with bulleted sub-points, or a bulleted list with a numbered sub-procedure.

nested-mixed.html

HTML

<ol>
  <li>Gather ingredients
    <ul>
      <li>Flour</li>
      <li>Sugar</li>
    </ul>
  </li>
  <li>Bake</li>
</ol>

Browsers automatically restart numbering/bullet style for each nesting depth by default (circle → disc → square for unordered nesting), which is a helpful visual cue that you've gone a level deeper.

Section 3

Building a Multi-Level Outline

Nesting isn't limited to two levels — a table of contents, a legal document, or a course syllabus might go three or four levels deep. Each level is just another <ul>/<ol> inside the <li> above it.

nested-outline.html

HTML

<ol>
  <li>HTML Basics
    <ol type="a">
      <li>Structure
        <ol type="i">
          <li>DOCTYPE</li>
          <li>head vs body</li>
        </ol>
      </li>
      <li>Elements</li>
    </ol>
  </li>
</ol>
<!-- Renders: 1. → a. → i. -->

💡

Keep nesting shallow when possible

Three or more levels deep gets hard to read for users and hard to maintain in code. If you find yourself at level 4, consider whether headings (<h2>, <h3>) would organize the content more clearly than deeper list nesting.

🧩 Knowledge Check — Lesson 13

5 questions to test your nested list knowledge.

1. Where must a nested <ul> or <ol> be placed?

2. Can you nest an <ol> inside a <ul>?

3. What happens if you place a <ul> directly inside another <ul>, not inside an <li>?

4. How many levels deep can HTML lists nest?

5. If your content is 4+ levels deep, what should you consider?

💪

Coding Challenge — Lesson 13

Apply what you learned · Beginner Level

Challenge: Build a Course Syllabus Outline

Build a 2-level nested <ol> representing a course syllabus:

• Module 1: HTML Basics — with 3 nested sub-topics
• Module 2: CSS Basics — with 3 nested sub-topics

Bonus: Add a 3rd nesting level under one sub-topic with 2 specific lesson names.

💡 Show hints if you're stuck

Outer list: <ol><li>Module 1: HTML Basics<ol>...</ol></li></ol>
Remember: the nested <ol> goes INSIDE the <li>, after the module name text

Finished this lesson?

Mark it complete to track your progress.

Module 13 of 62Phase 4 — Lists

Nested Lists

The Core Rule: Nest Inside the <li>

Mixing List Types

Building a Multi-Level Outline

Module 4 Complete!