Nested lists in HTML - Mini Project: Build & Apply

Creating a Nested List in HTML

📖 Scenario: You are building a simple webpage that shows a grocery list. Some items have sub-items to buy, so you want to show them as nested lists.

🎯 Goal: Create an HTML page with a nested list showing main grocery categories and their sub-items.

📋 What You'll Learn

Use semantic HTML5 structure with <main> and <section> tags

Create an unordered list <ul> with nested <ul> inside list items

Use proper indentation for readability

Include a page title inside <header>

Make sure the HTML is valid and renders correctly in a browser

💡 Why This Matters

🌍 Real World

Nested lists are common in menus, outlines, and categorized data on websites. Learning to create them helps you organize information clearly.

💼 Career

Web developers often build navigation menus and content lists that require nested lists. Understanding this helps in creating accessible and well-structured web pages.

1

Create the basic HTML structure with a main unordered list

Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> with charset UTF-8 and viewport meta tags, and <body>. Inside the <body>, add a <main> element containing an unordered list <ul> with three list items: Fruits, Vegetables, and Dairy.

HTML

  
  
  Grocery List


  
    
      Fruits
      Vegetables
      Dairy
    
  
  

Hint

Start by typing the full HTML5 page structure. Inside the <body>, add a <main> tag and inside it an unordered list <ul> with three list items exactly named Fruits, Vegetables, and Dairy.

2

Add a header with the page title

Inside the <body> but before the <main>, add a <header> element containing an <h1> with the text Grocery List.

HTML

  
  
  Grocery List


  
  
    
      Fruits
      Vegetables
      Dairy
    
  

Hint

Remember to place the <header> before the <main>. Inside the header, add an <h1> with the exact text Grocery List.

3

Add nested lists for sub-items under each main category

Inside each main list item (<li>) for Fruits, Vegetables, and Dairy, add a nested unordered list <ul> with these exact sub-items:

Fruits: Apples, Bananas, Oranges
Vegetables: Carrots, Broccoli
Dairy: Milk, Cheese

HTML

  
  
  Grocery List


  
    Grocery List
  
  
    
      Fruits
        
      
      Vegetables
        
      
      Dairy
        
      
    
  

Hint

Inside each main <li>, add a nested <ul> with the exact sub-items as <li> elements. Make sure to close all tags properly.

4

Add a footer with a small note

After the <main> element, add a <footer> element containing a <p> with the text List updated on 2024-06-01.

HTML

  
  
  Grocery List


  
    Grocery List
  
  
    
      Fruits
        
          Apples
          Bananas
          Oranges
        
      
      Vegetables
        
          Carrots
          Broccoli
        
      
      Dairy
        
          Milk
          Cheese
        
      
    
  
  

Hint

Place the <footer> after the <main>. Inside the footer, add a paragraph <p> with the exact text List updated on 2024-06-01.

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