🌱BeginnerLists
Nested Lists
Create hierarchical list structures by nesting <ul> or <ol> inside <li> elements.
Overview
Lists can be nested inside each other to create multi-level hierarchical structures like an outline, a table of contents, or a multi-level menu. A nested list is created by placing a new <ul> or <ol> element inside an <li> element.
The nesting rule is important: the inner list must be inside an <li>, not directly inside the parent <ul> or <ol>. You can mix list types a <ul> inside an <ol>, or an <ol> inside a <ul>.
Key Points
- •Nest lists by placing a <ul> or <ol> inside an <li> element
- •The nested list must be inside <li>, not directly inside the parent list
- •You can nest <ol> inside <ul> and vice versa mix types freely
- •Browsers automatically indent nested lists and change bullet styles
- •Keep nesting to 3 levels maximum deeper hierarchies are hard to read
- •Screen readers announce the nesting level to help users understand the hierarchy
Examples
Two-level nested unordered list
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>Ordered steps with unordered sub-options
<ol>
<li>Install dependencies
<ul>
<li>Run: npm install</li>
<li>Or: yarn install</li>
</ul>
</li>
<li>Configure environment
<ul>
<li>Copy .env.example to .env</li>
<li>Set your database URL</li>
</ul>
</li>
<li>Start the server</li>
</ol>Three-level deep outline
<ol>
<li>Introduction
<ol type="a">
<li>Background
<ul>
<li>Historical context</li>
<li>Prior research</li>
</ul>
</li>
<li>Objectives</li>
</ol>
</li>
<li>Methods</li>
</ol>Common Mistakes
- Placing the nested list directly inside <ul> instead of inside <li> invalid HTML
- Nesting more than 3-4 levels hard to read and rarely necessary
Note
When you see an outline or table of contents on a document, nested lists are likely the right structure. Write the top-level items first, then add the nested <ul>/<ol> inside the relevant <li>.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4