Nested List

You will learn how to structure nested lists in HTML by placing a new list inside an existing list item, enabling clear hierarchical content like outlines or menus.

What it is

A nested list is a list that appears within another list. In HTML, this is achieved by placing a <ul> (unordered) or <ol> (ordered) element inside the <li> element of its parent list. This creates a visual hierarchy where sub-items are indented relative to their parent items. Related terms include "sub-list," "child list," and "multi-level list."

Why it matters

• Logical Structure: It accurately represents relationships between main topics and sub-topics, such as chapters and sections in a document.
• Accessibility: Screen readers announce nesting levels, helping users with disabilities understand the content hierarchy.
• CSS Styling: Nested structures allow for precise CSS targeting, enabling custom indentation, bullet styles, or spacing for different levels.
• Navigation Menus: Dropdown menus and site maps rely heavily on nested lists to organize links into categories and sub-categories.

Syntax or steps

1. Create the parent list using <ul> or <ol>.
2. Add a standard list item <li> to the parent.
3. Inside that <li>, open a new list tag (<ul> or <ol>).
4. Add child <li> elements to the inner list.
5. Close the inner list tags before closing the parent <li>.

Example

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables
    <ol>
      <li>Carrot</li>
      <li>Potato</li>
    </ol>
  </li>
</ul>

Explanation: The outer <ul> contains two main items: "Fruits" and "Vegetables." Inside the "Fruits" <li>, there is a second <ul> containing "Apple" and "Banana." Inside the "Vegetables" <li>, there is an <ol> containing "Carrot" and "Potato." Note that the inner lists are completely contained within their respective parent <li> tags.

Common mistakes

• Placing the list outside the <li>: If you put the nested <ul> after the closing </li> but still inside the parent <ul>, it becomes a sibling item, not a child. Always nest inside the <li>.
• Missing closing tags: Forgetting to close the inner list or the parent <li> breaks the structure. Ensure every opening tag has a corresponding closing tag.
• Using <p> instead of <li>: You cannot place a list directly inside a paragraph. Lists must be children of other list items or list containers.
• Inconsistent indentation: While browsers handle whitespace loosely, poor formatting makes code hard to read. Use consistent indentation to visualize the nesting depth.

When to use it

Practice

Guided Exercise: Create a nested list representing a book outline. The top level should have "Chapter 1" and "Chapter 2." Under "Chapter 1," add a sub-list with "Introduction" and "Body." Under "Chapter 2," add a sub-list with "Conclusion" and "References."

Challenge: Modify your exercise so that "Body" under Chapter 1 has its own sub-list containing "Section A" and "Section B." Verify that the browser renders three distinct levels of indentation.

Quick check

Question: Where exactly does the nested <ul> tag go in relation to the parent <li> tag?

Answer: It goes inside the parent <li> tags, typically after any text content within that item but before the closing </li>.

Summary

Nested lists are created by placing a list element inside a list item of another list. This technique is essential for organizing hierarchical data, improving accessibility, and enabling complex CSS styling for menus and outlines.