Module 2: Text · Lesson 5 of 8
HTML Nested Lists: How to Make a List Inside a List
All lessons in Module 2
Goal: Build sub-lists by putting a list inside a list item.
Learn
Sometimes a list item needs its own sub-list. Picture a cafe menu with drinks and food, each with several choices. Placing a whole new <ul> or <ol> inside an <li> is called nesting. The result is a two-level outline (opens in a new tab), like the table of contents of a book.
<ul>
<li>Drinks
<ul>
<li>Tea</li>
</ul>
</li>
</ul>Look closely at where the </li> for Drinks goes: after the inner list, because the sub-list is part of that item. The classic mistake is closing the li first and putting the inner list straight inside the outer ul. It looks almost the same. The structure is broken, though, and screen readers announce the wrong number of items. If ul, ol and li are still new to you, revisit Lists first.
The short version
- A nested list is a complete
<ul>or<ol>placed inside an<li>. - The parent item's
</li>comes after the inner list, because the sub-list belongs to that item. - You can mix list types freely, for example numbered steps under a bulleted item.
- Indent each level by two more spaces so you can see which item owns which sub-list.
Example
<ol>
<li>Prepare
<ul>
<li>Wash the vegetables</li>
<li>Chop the onion</li>
</ul>
</li>
<li>Cook
<ul>
<li>Fry the onion</li>
<li>Add the rest</li>
</ul>
</li>
</ol>Your task
Turn the cafe menu into a two-level list:
- Inside the
Drinksitem, add a nested list with at least 2 drinks. - Inside the
Fooditem, add a nested list with at least 2 dishes. - Each inner list must be inside its
<li>, before that item's</li>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<ol>
<li>Prepare</li>
<ul>
<li>Wash the vegetables</li>
</ul>
</ol>Right
<ol>
<li>Prepare
<ul>
<li>Wash the vegetables</li>
</ul>
</li>
</ol>An inner list directly inside ol or ul is invalid. Move it into the item it belongs to, before </li>.
Wrong
<li>Drinks
<ul>
<li>Coffee</li>
</ul>
<ul>
<li>Tea</li>
</ul>
</li>Right
<li>Drinks
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
</li>Every ul starts a separate list, so screen readers announce two one-item lists instead of one list of drinks.
Go deeper
You have used plenty of nested lists without noticing. A site menu with drop-down submenus is usually a <ul> of links in which some items hold another <ul>. Tables of contents, outlines, forum threads and file trees follow the same pattern. Menus like these usually sit inside a nav element, covered in Header, Nav, Main, Footer.
Correct structure lets people use them without a mouse or a screen. Screen readers announce each list with its number of items and tell the user when they move into a deeper level, so a listener can skip an entire submenu at once. With the inner list in the wrong place, those counts and levels are wrong, even when the page looks fine.
Keep the text of a parent item short, like a label. Drinks is plenty. If an item needs a longer introduction, you can put a <p> inside the <li> before the inner list. That's valid, because an li may contain any flow content (opens in a new tab).
When nesting gets confusing, write the outer list first with every <li> on two lines, opening and closing, then slot each inner list in between.
Frequently asked questions
How do I create a nested list in HTML?
Write the parent item's text, then a complete new <ul> or <ol> with its own <li> items, and only then close the parent with </li>: <li>Drinks <ul><li>Tea</li></ul></li>. The inner list must live inside an item, never directly inside the outer list.
How many levels deep can HTML lists be nested?
HTML sets no limit, so you can nest lists as deep as you like. Your readers set the limit. Two or three levels are fine. Go deeper and people lose track of where they are, especially on small screens and with screen readers. If you need more depth, split the content into sections with headings.
Why does my nested list have different bullets?
Browsers change the default bullet for each level of <ul> nesting: a filled disc, then a hollow circle, then a square. Numbered lists keep plain numbers at every level. You can choose any style with CSS, for example ul ul{list-style-type:square}. Numbering like 1.1 and 1.2 is possible with CSS counters, defined in the CSS Lists and Counters (opens in a new tab) specification.