HTML Nested Lists
Nested lists are lists placed inside another list item. They are useful for representing hierarchical and grouped information.
1. What is a Nested List?
A nested list is a list placed inside an existing
<li> element.
A nested list can be an unordered list, ordered list, or even a combination of both.
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>-
Frontend
- HTML
- CSS
- JavaScript
2. Basic Nested Unordered List
An unordered list can contain another unordered list.
<ul>
<li>
Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>
Vegetables
<ul>
<li>Carrot</li>
<li>Potato</li>
<li>Tomato</li>
</ul>
</li>
</ul>3. Basic Nested Ordered List
An ordered list can contain another ordered list.
<ol>
<li>
Frontend
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>
Backend
<ol>
<li>C#</li>
<li>.NET</li>
<li>SQL</li>
</ol>
</li>
</ol>-
Frontend
- HTML
- CSS
- JavaScript
-
Backend
- C#
- .NET
- SQL
4. Unordered List Inside Ordered List
Different list types can be combined.
<ol>
<li>
Frontend Technologies
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Backend Technologies
<ul>
<li>C#</li>
<li>.NET</li>
<li>SQL</li>
</ul>
</li>
</ol>5. Ordered List Inside Unordered List
An ordered list can also be placed inside an unordered list item.
<ul>
<li>
Learn Web Development
<ol>
<li>Learn HTML</li>
<li>Learn CSS</li>
<li>Learn JavaScript</li>
</ol>
</li>
</ul>6. Three-Level Nested List
Lists can contain multiple levels when the information has several layers of hierarchy.
<ul>
<li>
Web Development
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Backend
<ul>
<li>C#</li>
<li>.NET</li>
<li>SQL</li>
</ul>
</li>
</ul>
</li>
</ul>-
Web Development
-
Frontend
- HTML
- CSS
- JavaScript
-
Backend
- C#
- .NET
- SQL
-
Frontend
7. Four-Level Nested List
HTML allows lists to be nested to multiple levels, although excessive nesting can make content difficult to read.
<ul>
<li>
Technology
<ul>
<li>
Web Development
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>8. Nested List for Course Structure
Nested lists are useful for organizing course modules and topics.
<h2>Full Stack Development</h2>
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Backend
<ul>
<li>C#</li>
<li>.NET</li>
<li>Web API</li>
</ul>
</li>
<li>
Database
<ul>
<li>SQL Server</li>
<li>Queries</li>
<li>Stored Procedures</li>
</ul>
</li>
</ul>9. Nested List for Website Navigation
Nested lists can represent dropdown-style navigation structures.
<nav>
<ul>
<li>
Courses
<ul>
<li>
Web Development
</li>
<li>
Data Science
</li>
<li>
Software Testing
</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>10. Nested List with Links
<ul>
<li>
Programming
<ul>
<li>
<a href="java.html">Java</a>
</li>
<li>
<a href="csharp.html">C#</a>
</li>
<li>
<a href="python.html">Python</a>
</li>
</ul>
</li>
</ul>11. Nested List for Step-by-Step Learning
A top-level ordered list can contain detailed unordered lists under each step.
<ol>
<li>
Learn HTML
<ul>
<li>Elements</li>
<li>Attributes</li>
<li>Forms</li>
</ul>
</li>
<li>
Learn CSS
<ul>
<li>Selectors</li>
<li>Colors</li>
<li>Layouts</li>
</ul>
</li>
</ol>12. Nested List for Product Categories
<ul>
<li>
Electronics
<ul>
<li>Laptops</li>
<li>Mobile Phones</li>
<li>Tablets</li>
</ul>
</li>
<li>
Accessories
<ul>
<li>Mouse</li>
<li>Keyboard</li>
<li>Headphones</li>
</ul>
</li>
</ul>13. Nested List for Organization Structure
<ul>
<li>
Management
<ul>
<li>
Development Team
<ul>
<li>Frontend Developers</li>
<li>Backend Developers</li>
</ul>
</li>
<li>
Testing Team
<ul>
<li>Manual Testers</li>
<li>Automation Testers</li>
</ul>
</li>
</ul>
</li>
</ul>14. Nested Ordered List with Custom Types
Different levels can use different ordered list marker styles.
<ol type="I">
<li>
Frontend
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>
Backend
<ol type="A">
<li>C#</li>
<li>.NET</li>
<li>SQL</li>
</ol>
</li>
</ol>15. Nested Lists with CSS
CSS can be used to control indentation and spacing between different levels.
<style>
.main-list {
padding-left: 25px;
}
.main-list ul {
padding-left: 30px;
margin-top: 8px;
}
.main-list li {
margin-bottom: 8px;
}
</style>
<ul class="main-list">
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>16. Removing Default List Markers
CSS can remove the default markers if a custom design is required.
<style>
.menu,
.menu ul {
list-style-type: none;
padding-left: 0;
}
</style>
<ul class="menu">
<li>
Courses
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>17. Nested Lists with Description Lists
Description lists can also contain other lists in their descriptions.
<dl>
<dt>Frontend Development</dt>
<dd>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</dd>
<dt>Backend Development</dt>
<dd>
<ul>
<li>C#</li>
<li>.NET</li>
<li>SQL</li>
</ul>
</dd>
</dl>18. Nested List with Images
<ul>
<li>
Programming Languages
<ul>
<li>
<img src="java.png"
alt="Java"
width="30">
Java
</li>
<li>
<img src="csharp.png"
alt="C#"
width="30">
C#
</li>
<li>
<img src="python.png"
alt="Python"
width="30">
Python
</li>
</ul>
</li>
</ul>19. Nested List for FAQ Categories
<ul>
<li>
HTML Questions
<ul>
<li>What is HTML?</li>
<li>What is an element?</li>
<li>What is an attribute?</li>
</ul>
</li>
<li>
CSS Questions
<ul>
<li>What is CSS?</li>
<li>What is a selector?</li>
<li>What is the box model?</li>
</ul>
</li>
</ul>20. Correct Structure of Nested Lists
The nested list should be placed inside the relevant
<li> element.
<ul>
<li>
Parent Item
<ul>
<li>Child Item 1</li>
<li>Child Item 2</li>
</ul>
</li>
</ul><ul> or <ol>
should be placed inside the parent <li>
when it represents sub-items of that item.
21. Incorrect Concept
A nested list should not be placed as an unrelated sibling when it actually belongs to a parent item.
Compare this:
<ul>
<li>Frontend</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</ul>The clearer structure is:
<ul>
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>22. Accessibility Considerations
Nested lists should represent meaningful relationships between parent and child items.
- Keep hierarchy logical.
- Use headings when a new major section begins.
- Avoid unnecessary levels of nesting.
- Use list elements according to their meaning.
- Keep labels descriptive and understandable.
23. Common Mistakes
- Placing the nested list outside the related
<li>. - Creating too many nesting levels.
- Using nested lists only to create visual indentation.
- Mixing unrelated content in the same hierarchy.
- Using inconsistent list structures.
- Forgetting to close nested list elements.
24. Practical Example
<h1>Web Development Roadmap</h1>
<ol>
<li>
Frontend Development
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Backend Development
<ul>
<li>C#</li>
<li>.NET</li>
<li>Web API</li>
</ul>
</li>
<li>
Database
<ul>
<li>SQL Server</li>
<li>Queries</li>
<li>Stored Procedures</li>
</ul>
</li>
</ol>25. Complete Practice Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Lists Example</title>
<style>
.roadmap {
padding-left: 25px;
}
.roadmap ul {
margin-top: 8px;
padding-left: 25px;
}
.roadmap li {
margin-bottom: 8px;
}
</style>
</head>
<body>
<h1>Full Stack Development Roadmap</h1>
<ol class="roadmap">
<li>
Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>
Backend
<ul>
<li>C#</li>
<li>.NET</li>
<li>Web API</li>
</ul>
</li>
<li>
Database
<ul>
<li>SQL Server</li>
<li>Queries</li>
<li>Stored Procedures</li>
</ul>
</li>
</ol>
</body>
</html>26. Practice Task
Create an HTML page containing:
- A two-level unordered list.
- A two-level ordered list.
- An ordered list containing unordered sub-lists.
- An unordered list containing ordered sub-lists.
- A three-level technology hierarchy.
- A nested course structure.
- A navigation menu with nested items.
- A product category hierarchy.
Summary
Nested lists are created by placing a <ul>
or <ol> inside a parent
<li>. They are useful for representing
hierarchical information such as course structures,
navigation menus, categories, roadmaps, and organizational
data. Different list types can be combined, and CSS can be
used to control indentation, spacing, and visual appearance.