Nested lists allow you to create hierarchical structures by placing one list inside another. This is perfect for representing complex information like site maps, outlines, multi-level navigation, and category structures.
What Are Nested Lists?
A nested list is simply a list (ul, ol, or dl) placed inside a list item (li or dd) of another list. You can nest lists as deep as needed, though more than 3-4 levels can become hard to read.
Basic Nested Unordered Lists
To create a nested list, place a complete list element inside an li element:
basic-nested-ul.html
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
</ul>This renders as:
- Fruits
- Apples
- Bananas
- Oranges
- Vegetables
- Carrots
- Broccoli
- Spinach
Nested Ordered Lists
Ordered lists can be nested the same way, creating multi-level numbered structures:
nested-ol.html
<ol>
<li>Introduction
<ol>
<li>What is HTML?</li>
<li>Why Learn HTML?</li>
<li>Prerequisites</li>
</ol>
</li>
<li>Getting Started
<ol>
<li>Installing a Code Editor</li>
<li>Creating Your First File</li>
<li>Understanding HTML Structure</li>
</ol>
</li>
<li>Advanced Topics
<ol>
<li>Semantic HTML</li>
<li>Forms and Validation</li>
<li>Accessibility</li>
</ol>
</li>
</ol>Mixed List Types
You can nest different types of lists within each other:
Ordered List with Unordered Sublists
ol-with-ul.html
<ol>
<li>Plan Your Website
<ul>
<li>Define your goals</li>
<li>Research your audience</li>
<li>Create a sitemap</li>
</ul>
</li>
<li>Design Phase
<ul>
<li>Create wireframes</li>
<li>Choose color scheme</li>
<li>Select typography</li>
</ul>
</li>
<li>Development
<ul>
<li>Write HTML structure</li>
<li>Style with CSS</li>
<li>Add JavaScript functionality</li>
</ul>
</li>
</ol>Unordered List with Ordered Sublists
ul-with-ol.html
<ul>
<li>Breakfast Recipes
<ol>
<li>Mix dry ingredients</li>
<li>Add wet ingredients</li>
<li>Cook on medium heat</li>
</ol>
</li>
<li>Lunch Recipes
<ol>
<li>Prepare vegetables</li>
<li>Season protein</li>
<li>Combine and serve</li>
</ol>
</li>
</ul>Multiple Levels of Nesting
You can nest lists several levels deep for complex hierarchies:
multi-level.html
<ul>
<li>Web Development
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Flexbox</li>
<li>Grid</li>
<li>Animations</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>ES6+ Features</li>
<li>DOM Manipulation</li>
<li>Async Programming</li>
</ul>
</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
<li>Databases
<ul>
<li>SQL</li>
<li>NoSQL</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>Practical Examples
Site Navigation with Submenus
navigation.html
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a>
<ul>
<li><a href="/about/team">Our Team</a></li>
<li><a href="/about/history">Company History</a></li>
<li><a href="/about/careers">Careers</a></li>
</ul>
</li>
<li><a href="/services">Services</a>
<ul>
<li><a href="/services/web-design">Web Design</a></li>
<li><a href="/services/development">Development</a></li>
<li><a href="/services/consulting">Consulting</a></li>
</ul>
</li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>Product Categories
categories.html
<section>
<h2>Shop by Category</h2>
<ul>
<li>Electronics
<ul>
<li>Computers
<ul>
<li>Laptops</li>
<li>Desktops</li>
<li>Tablets</li>
</ul>
</li>
<li>Mobile Devices
<ul>
<li>Smartphones</li>
<li>Accessories</li>
</ul>
</li>
<li>Audio
<ul>
<li>Headphones</li>
<li>Speakers</li>
<li>Microphones</li>
</ul>
</li>
</ul>
</li>
<li>Clothing
<ul>
<li>Men's</li>
<li>Women's</li>
<li>Kids'</li>
</ul>
</li>
</ul>
</section>Course Outline
course-outline.html
<article>
<h2>Complete Web Development Course</h2>
<ol>
<li>Module 1: HTML Fundamentals
<ol>
<li>Introduction to HTML
<ol type="a">
<li>What is HTML?</li>
<li>HTML History</li>
<li>Setting Up</li>
</ol>
</li>
<li>HTML Elements
<ol type="a">
<li>Basic Tags</li>
<li>Attributes</li>
<li>Semantic HTML</li>
</ol>
</li>
</ol>
</li>
<li>Module 2: CSS Styling
<ol>
<li>CSS Basics
<ol type="a">
<li>Selectors</li>
<li>Properties</li>
<li>Box Model</li>
</ol>
</li>
<li>Layout Techniques
<ol type="a">
<li>Flexbox</li>
<li>Grid</li>
<li>Positioning</li>
</ol>
</li>
</ol>
</li>
<li>Module 3: JavaScript
<ol>
<li>JavaScript Fundamentals</li>
<li>DOM Manipulation</li>
<li>Events and Interactivity</li>
</ol>
</li>
</ol>
</article>Recipe with Nested Instructions
recipe.html
<article>
<h2>Homemade Pizza Recipe</h2>
<ol>
<li>Make the Dough
<ol type="a">
<li>Mix flour, water, yeast, and salt</li>
<li>Knead for 10 minutes</li>
<li>Let rise for 1 hour</li>
</ol>
</li>
<li>Prepare Toppings
<ul>
<li>Slice vegetables</li>
<li>Grate cheese</li>
<li>Prepare sauce</li>
</ul>
</li>
<li>Assemble Pizza
<ol type="a">
<li>Roll out dough</li>
<li>Spread sauce</li>
<li>Add toppings
<ul>
<li>Cheese layer</li>
<li>Vegetables</li>
<li>Meat (optional)</li>
</ul>
</li>
</ol>
</li>
<li>Bake at 450°F for 15 minutes</li>
</ol>
</article>File/Folder Structure
file-structure.html
<section>
<h2>Project Structure</h2>
<ul>
<li>📁 project-root
<ul>
<li>📁 css
<ul>
<li>📄 styles.css</li>
<li>📄 reset.css</li>
</ul>
</li>
<li>📁 js
<ul>
<li>📄 main.js</li>
<li>📄 utils.js</li>
</ul>
</li>
<li>📁 images
<ul>
<li>📄 logo.png</li>
<li>📄 banner.jpg</li>
</ul>
</li>
<li>📁 pages
<ul>
<li>📄 about.html</li>
<li>📄 contact.html</li>
</ul>
</li>
<li>📄 index.html</li>
</ul>
</li>
</ul>
</section>Important Nesting Rules
⚠️ Critical Rules:
- Nested lists must be inside an
<li>element - A nested list is a child of the li element, not a sibling
- Close all tags properly to maintain hierarchy
- The nested list should come after the li text/content
Correct vs Incorrect Nesting
❌ Wrong:
MARKUP
<!-- Nested list outside li -->
<ul>
<li>Item 1</li>
<ul>
<li>Subitem</li>
</ul>
</ul>
<!-- Unclosed li tag -->
<ul>
<li>Item 1
<ul>
<li>Subitem</li>
</ul>
</ul>✅ Correct:
MARKUP
<!-- Nested list inside li -->
<ul>
<li>Item 1
<ul>
<li>Subitem</li>
</ul>
</li>
</ul>
<!-- Properly closed tags -->
<ul>
<li>Item 1
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 2</li>
</ul>Browser Default Styling
Browsers automatically style nested lists:
- Nested lists are indented further left
- Bullet styles may change (disc → circle → square)
- Nested ordered lists continue parent numbering style by default
- Each level adds additional left padding
Styling Nested Lists
nested-styles.css
/* Target specific nesting levels */
ul li ul {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
/* Different bullets for each level */
ul { list-style-type: disc; }
ul ul { list-style-type: circle; }
ul ul ul { list-style-type: square; }
/* Custom indentation */
ul ul {
padding-left: 2rem;
}
/* Different numbering for nested ordered lists */
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }
/* Collapsible nested lists (requires JavaScript) */
.collapsible > li > ul {
display: none;
}
.collapsible > li.expanded > ul {
display: block;
}
/* Visual hierarchy with colors */
ul li {
color: #333;
}
ul li ul li {
color: #666;
}
ul li ul li ul li {
color: #999;
}Accessibility Considerations
♿ Accessibility Best Practices:
- Screen readers announce nesting level to users
- Keep nesting to 3-4 levels maximum for comprehension
- Ensure keyboard navigation works for nested navigation menus
- Provide clear parent-child relationships in text
- Test with screen readers to verify structure
- Consider providing skip links for deep nested menus
Common Use Cases
✅ Use nested lists for:
- Site navigation with dropdown menus
- Table of contents with sections and subsections
- Product categories and subcategories
- File and folder structures
- Organizational charts
- Outlines and hierarchies
- Multi-step processes with sub-steps
- Taxonomies and classification systems
Best Practices
✅ Do:
- Always place nested lists inside li elements
- Use appropriate list types for each level
- Keep nesting depth reasonable (3-4 levels max)
- Close all tags properly
- Use semantic structure for better accessibility
- Indent code for better readability
- Test keyboard navigation for interactive lists
❌ Don't:
- Place nested lists as siblings of li elements
- Nest too deeply (becomes hard to read)
- Forget closing tags on parent li elements
- Use nested lists just for indentation
- Create overly complex hierarchies
- Mix list types randomly without purpose
Debugging Nested Lists
💡 Debugging Tips:
- Indent your HTML code properly for visual structure
- Use an HTML validator to check for errors
- Check browser DevTools for unclosed tags
- Verify nested lists are inside li elements
- Ensure each opening tag has a matching closing tag
- Test rendering in multiple browsers
Key Takeaways
- Nested lists create hierarchical structures
- Nested lists must be placed inside li elements
- You can nest ul, ol, or dl within each other
- Mix different list types as needed
- Keep nesting depth reasonable for readability
- Perfect for navigation, outlines, and categorization
- Browsers automatically indent and style nested levels
- Screen readers announce nesting levels to users
What's Next?
Congratulations! You've completed the Lists section. You now know how to create unordered lists, ordered lists, description lists, and nested lists to organize information in various ways.
In the next section, we'll move on to Tables. You'll learn how to create and structure tabular data using HTML table elements.