Nested Lists
Part of the Fundamentals section of Coddy's HTML journey — lesson 14 of 60.
You can place one list inside another—this is called a nested list. This is useful for creating hierarchical structures, such as outlines or multi-level menus.
To create a nested list, you simply place an <ul> or <ol> element inside an <i><li></i> element of another list.
Here's an example of a nested unordered list:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>The second item contains a nested list with two subitems. In the browser, it will display like this:
- Item 1
- Item 2
- Subitem 2.1
- Subitem 2.2
- Item 3
You can also nest ordered lists or mix both.
Challenge
EasyCreate an HTML document with a nested list. The list should look like this:
- Fruits
- Apple
- Banana
- Orange
- Vegetables
- Carrot
- Broccoli
- Spinach
- Grains
Cheat sheet
A nested list is created by placing a <ul> or <ol> element inside an <li> element of another list:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>You can nest ordered lists or mix both ordered and unordered lists within each other.
Try it yourself
<!DOCTYPE html>
<html>
<body>
<!-- Write code here -->
</body>
</html>
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
All lessons in Fundamentals
2Text and Formatting
HeadingsParagraphsLine BreaksBold and Italic TextBold and Italic AgainRecap - Formatting8Forms and Inputs Part 1
Form BasicsText InputsInput AttributesPassword FieldLabels for InputsRecap - Basic Form11Event Registration Page
Project OverviewHeader Section
Event Details SectionRegistration FormFooter Section9Forms and Inputs Part 2
Radio ButtonsCheckboxesDropdownsButtonsButtons in FormsRecap - Forms #1Recap - Forms #2