Nested lists in HTML

Introduction

Nested lists help organize information in groups and subgroups. They make content easier to read and understand.

To show steps with sub-steps, like a recipe with detailed instructions.

To list categories and subcategories, like a menu with food types and dishes.

To display an outline with main points and supporting details.

To create a table of contents with chapters and sections.

To organize tasks with main tasks and smaller tasks inside.

Syntax

HTML

<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1a</li>
      <li>Subitem 1b</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>

Use

for unordered (bulleted) lists and
for ordered (numbered) lists.

You can put a list inside a

to create a nested list.

Examples

This shows a list with 'Fruits' having a nested list of two items.

HTML

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

An ordered list with nested ordered substeps.

HTML

<ol>
  <li>Step 1
    <ol>
      <li>Substep 1a</li>
      <li>Substep 1b</li>
    </ol>
  </li>
  <li>Step 2</li>
</ol>

Multiple levels of nested lists showing deep grouping.

HTML

<ul>
  <li>Item A</li>
  <li>Item B
    <ul>
      <li>Subitem B1</li>
      <li>Subitem B2
        <ul>
          <li>Sub-subitem B2a</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Sample Program

This page shows a main list of weekend tasks. Some tasks have smaller lists inside to show details.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nested Lists Example</title>
</head>
<body>
  <main>
    <h1>Weekend To-Do List</h1>
    <ul>
      <li>Housework
        <ul>
          <li>Clean kitchen</li>
          <li>Vacuum living room</li>
        </ul>
      </li>
      <li>Shopping
        <ul>
          <li>Buy groceries
            <ul>
              <li>Milk</li>
              <li>Bread</li>
              <li>Eggs</li>
            </ul>
          </li>
          <li>Pick up package</li>
        </ul>
      </li>
      <li>Relax</li>
    </ul>
  </main>
</body>
</html>

Important Notes

Nested lists can be as deep as you want, but too many levels can confuse readers.

Use semantic tags like <main> and headings to improve accessibility.

Screen readers announce nested lists clearly, helping users understand structure.

Summary

Nested lists organize information in groups and subgroups.

Use <ul> for bullets and <ol> for numbers.

Put a list inside a list item to create nesting.

Practice

1. What is the main purpose of using nested lists in HTML?

easy

A. To organize information into groups and subgroups

B. To add images inside list items

C. To change the font style of list items

D. To create buttons inside lists

Solution

1. Step 1: Understand the role of nested lists

   Nested lists allow placing one list inside another to show hierarchy or subgroups.

2. Step 2: Identify the correct purpose

   Organizing information into groups and subgroups matches the use of nested lists.

3. Final Answer:

   To organize information into groups and subgroups -> Option A

4. Quick Check:

   Nested lists = groups and subgroups [OK]

Hint: Nested lists group items inside other lists [OK]

Common Mistakes:

• Thinking nested lists add images
• Confusing nested lists with styling
• Believing nested lists create buttons

2. Which of the following is the correct syntax to start a nested unordered list inside a list item?

easy

A. <li><ul>

B. <ul><li>

C. <ol><ul>

D. <li><ol>

Solution

1. Step 1: Recall nested list structure

   A nested list must be inside a list item, so
2. comes first.

3. Step 2: Identify correct tag order

   Starting a nested unordered list inside a list item uses <li><ul>.

4. Final Answer:

   <li><ul> -> Option A

5. Quick Check:

   Nested list starts inside <li> [OK]

Hint: Nested list always starts inside a list item <li> [OK]

Common Mistakes:

• Starting nested list outside <li>
• Mixing <ul> and <ol> incorrectly
• Placing <li> before <ul> in wrong order

3. What will be the visual result of this HTML code?

<ul>
  <li>Fruit
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

medium

A. A numbered list with 'Fruit' and 'Vegetables' only

B. A bulleted list with 'Fruit' having a nested bulleted list of 'Apple' and 'Banana', and 'Vegetables' as a separate item

C. A bulleted list with 'Fruit', 'Apple', 'Banana', and 'Vegetables' all at the same level

D. An error because nested lists are not allowed inside list items

Solution

1. Step 1: Analyze the list tags

   The outer list is unordered (<ul>), so bullets appear. 'Fruit' has a nested <ul> with 'Apple' and 'Banana'.

2. Step 2: Understand nesting effect

   'Apple' and 'Banana' appear as a sub-bulleted list under 'Fruit'. 'Vegetables' is a separate top-level bullet.

3. Final Answer:

   A bulleted list with 'Fruit' having a nested bulleted list of 'Apple' and 'Banana', and 'Vegetables' as a separate item -> Option B

4. Quick Check:

   Nested <ul> creates sub-bullets [OK]

Hint: Nested <ul> creates sub-bullets under parent item [OK]

Common Mistakes:

• Thinking nested items appear at same level
• Confusing bullets with numbers
• Believing nested lists cause errors

4. Identify the error in this nested list HTML code:

<ul>
  <li>Item 1</li>
  <ul>
    <li>Subitem 1</li>
  </ul>
  <li>Item 2</li>
</ul>

medium

A. There should be no nested lists inside <ul>

B. The <li> tags are missing closing tags

C. The nested <ul> is not inside a <li> element

D. The outer <ul> should be an <ol>

Solution

1. Step 1: Check nested list placement

   The nested <ul> appears directly inside the outer <ul>, not inside any <li>.

2. Step 2: Understand correct nesting rules

   A nested list must be inside a list item (<li>), so this structure is invalid.

3. Final Answer:

   The nested <ul> is not inside a <li> element -> Option C

4. Quick Check:

   Nested list must be inside <li> [OK]

Hint: Nested lists must be inside a list item <li> [OK]

Common Mistakes:

• Placing nested <ul> directly inside <ul>
• Forgetting to close <li> tags
• Thinking <ul> and <ol> are interchangeable here

5. You want to create a nested list where the top level is numbered and the nested level is bulleted. Which HTML structure correctly achieves this?

hard

A. <ul>\n <li>Main Item</li>\n <ul>\n <li>Sub Item</li>\n <ul>\n</ul>

B. <ul>\n <li>Main Item\n <ol>\n <li>Sub Item</li>\n </ol>\n </li>\n</ul>

C. <ol>\n <li>Main Item</li>\n <ol>\n <li>Sub Item</li>\n </ol>\n</ol>

D. <ol>\n <li>Main Item\n <ul>\n <li>Sub Item</li>\n </ul>\n </li>\n</ol>

Solution

1. Step 1: Identify top-level list type

   The top level should be numbered, so use <ol> for the main list.

2. Step 2: Identify nested list type

   The nested list should be bulleted, so use <ul> inside a <li> of the <ol>.

3. Step 3: Check correct nesting

   The nested <ul> is correctly placed inside a <li> of the <ol>.

4. Final Answer:

   <ol> with nested <ul> inside <li> -> Option D

5. Quick Check:

   Numbered <ol> with bulleted <ul> nested inside [OK]

Hint: Use <ol> for numbers, <ul> inside <li> for bullets [OK]

Common Mistakes:

• Placing nested list outside <li>
• Using same list type for both levels
• Incorrectly closing tags