A nested list is a list placed inside another list's item — used for sub-items, sub-steps, or any hierarchy more than one level deep.
Syntax
<ul>
<li>Parent item
<ul>
<li>Child item</li>
</ul>
</li>
</ul>Basic Example
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>MongoDB</li>
</ul>
</li>
</ul>Browser output: "Frontend" and "Backend" appear as top-level bullets, each with its own indented sub-bullet list underneath — browsers automatically change the default bullet style (often from a filled circle to a hollow one) at each nesting depth.
How It Works
The nested <ul> or <ol> must be placed inside the parent <li> it belongs to, not as a sibling after it — this is the single detail that trips up most beginners.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none special — | Nesting is purely a matter of correct placement, not any special attribute |
Real-World Example
<ol>
<li>Set up your development environment
<ol type="a">
<li>Install Node.js</li>
<li>Install a code editor</li>
</ol>
</li>
<li>Build your first project</li>
</ol>Multi-part instructions — main numbered steps, with lettered sub-steps nested inside the first one, exactly how a detailed setup guide would be structured.
Common Mistakes
- Placing the nested list after the closing
</li>instead of inside it — this breaks the parent-child relationship and produces incorrect, unpredictable indentation - Nesting more than 2–3 levels deep, which usually signals the content should be restructured (e.g. as headings and separate lists) rather than deeply nested bullets
Best Practices
- Always place a nested list fully inside its parent
<li> - Keep nesting depth shallow — 2 levels is usually the practical readable limit
Accessibility Considerations
Screen readers announce nesting depth ("list within a list") so users understand the hierarchy — but very deep nesting becomes genuinely hard to follow audibly, even more so than visually.
SEO Considerations
No direct ranking effect beyond the general benefits of well-structured, real list markup covered in Lists (overview).
Browser & Modern HTML Notes
Nesting behavior is unchanged across HTML versions; default marker style changes per nesting level (bullet → circle → square, in most browsers) are purely a browser default and can be fully overridden with CSS.
Mini Practice
- Build a 2-level nested unordered list grouping 3 categories with 2 items each.
- Fix a broken example where a nested list is placed as a sibling after
</li>instead of inside it.
