Nested Lists
Place a list inside another list to show hierarchy.
Syntax
<li>Item<ul><li>Sub-item</li></ul></li>Lists can be nested to create sublists. Put a complete <ul> or <ol> inside an <li> element.
Nested lists are useful for outlines, menus, and categories with subcategories.
Example
Loading editor…
Press Run to see the result.
When to use it
- A table of contents uses nested lists to represent chapters with sub-sections indented under each chapter.
- A product category menu nests sub-categories under parent categories using <ul> inside <li>.
- A multi-level outline for a document uses nested <ol> to number sections like 1.1, 1.2, 2.1.
More examples
Nested unordered list for a menu
A <ul> placed inside an <li> creates a sub-list that browsers indent under the parent item.
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>Nested ordered list for an outline
Nesting <ol> inside <li> creates hierarchical numbered outlines with automatic sub-numbering.
<ol>
<li>HTML Basics
<ol>
<li>Document structure</li>
<li>Elements and tags</li>
</ol>
</li>
<li>CSS Styling
<ol>
<li>Selectors</li>
<li>Box model</li>
</ol>
</li>
</ol>Mixed list types for site map
Mixing <ul> and <ol> in nesting allows ordered sub-items inside an unordered parent list.
<ul>
<li>Home</li>
<li>Courses
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>Contact</li>
</ul>
Discussion