Nested Lists – Multi-Level Lists

Technical Deep Dive & Specifications

The Strict WHATWG DOM Nesting Law

The single most common bug written by junior developers when creating multi-level lists is placing a <ul> or <ol> directly inside an outer <ul> as a sibling to <li>.

❌ FATAL DOM SYNTAX ERROR:
<ul>
  <li>Frontend</li>
  <ul>                       <-- INVALID: <ul> cannot be child of <ul>!
    <li>HTML</li>
    <li>CSS</li>
  </ul>
  <li>Backend</li>
</ul>

✅ PERFECT WHATWG SPECIFICATION COMPLIANCE:
<ul>
  <li>
    Frontend                 <-- Text node
    <ul>                     <-- VALID: <ul> is nested INSIDE <li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>                      <-- <li> closes AFTER the sub-list
  <li>Backend</li>
</ul>

           VALID DOM TREE ARCHITECTURE
           
                     <ul>
                    /    \
                  <li>    <li> (Backend)
                 /    \
         "Frontend"    <ul>
                      /    \
                    <li>    <li>
                   (HTML)  (CSS)

Browser Bullet Glyphs Cascade

By default, modern browser user-agent stylesheets automatically cascade bullet styles as lists are nested deeper:

/* Standard User-Agent Multi-Level Bullet Rule */
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }

Mixing List Types: Hybrid Nesting

You can freely mix <ol> and <ul> within the same document hierarchy. For example, an ordered list of high-level phases containing unordered checklists of tasks:

<ol>
  <li>
    Phase 1: Environment Setup
    <ul>
      <li>Install Node.js LTS</li>
      <li>Configure ESLint & Prettier</li>
    </ul>
  </li>
  <li>
    Phase 2: Database Migration
    <ul>
      <li>Run Prisma migration scripts</li>
      <li>Seed initial staging data</li>
    </ul>
  </li>
</ol>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 41: Outer <ul> establishes Level 1. Marker renders as solid disc (•).
• Line 42: First Level 1 <li> begins (Platform Engineering).
• Line 44: Level 2 <ul> is nested inside the Level 1 <li>. Marker renders as hollow circle (◦).
• Lines 45–51: Level 2 <li> (Site Reliability) contains a Level 3 <ul>. Marker renders as solid square (▪).
• Line 58: Notice the closing </li> for Platform Engineering comes after all of its sub-lists are closed.

Expected Browser Render Output

+-----------------------------------------------------------+
| Engineering Organization Structure                        |
|                                                           |
|  * Platform Engineering                                   |
|    o Site Reliability (SRE)                               |
|      - Kubernetes Core Infrastructure                     |
|      - Observability & Distributed Tracing                |
|    o Developer Experience (DevEx)                         |
|      - CI/CD Pipeline Automation                          |
|      - Monorepo Tooling                                   |
|  * Product Engineering                                    |
|    o Checkout & Payments Core                             |
|    o Customer Identity & Auth                             |
+-----------------------------------------------------------+