In this lesson, you'll learn how to create nested (hierarchical) lists in HTML. Nested lists allow you to organize complex information by embedding lists within lists, enhancing the structure and readability of your web content.

What Are HTML Nested Lists?

HTML nested lists are lists that contain other lists within their items. This hierarchical structure is useful for displaying sub-items or categorizing information in a clear and organized manner. Both ordered (<ol>) and unordered (<ul>) lists can be nested to create multi-level lists.

Syntax of Nested Lists

The syntax for creating nested lists involves placing a new <ul> or <ol> inside an <li> (list item) of an existing list. Here's the general structure:

<ul>
  <li>Parent Item 1
    <ul>
      <li>Child Item 1</li>
      <li>Child Item 2</li>
    </ul>
  </li>
  <li>Parent Item 2</li>
</ul>

Explanation:

• The outer <ul> creates the main list.
• Inside the first <li>, another <ul> creates a sublist containing "Child Item 1" and "Child Item 2".
• "Parent Item 2" does not have a nested list.

Examples of HTML Nested Lists

Let's explore two practical examples of creating nested lists in HTML.

1. Simple Nested Unordered Lists

This example demonstrates a basic nested unordered list, where each parent list item contains a sublist of related items.

Explanation:

• The outer <ul> creates the main list of services.
• Each <li> (e.g., "Graphic Design") contains a nested <ul> with sub-services.
• This structure organizes services into categories and subcategories, enhancing clarity.

2. Mixed Nested Ordered and Unordered Lists

In this example, we'll create a nested list that combines both ordered and unordered lists. This is useful when you want to display steps within categories or prioritize certain items.

Explanation:

• The outer <ol> creates an ordered list representing the project phases.
• Within each <li> (e.g., "Planning"), a nested <ul> lists specific tasks related to that phase.
• This mixed approach provides a clear, step-by-step workflow with detailed sub-tasks.

Understanding how to effectively use nested lists allows you to present information in a well-organized and professional manner, enhancing the overall user experience on your website.