Nested lists in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start an unordered list.

HTML

<ul[1]>
  <li>Item 1</li>
</ul>

Drag options to blanks, or click blank then click option'

A<

B/>

C</

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using '<' instead of '>' to close the opening tag.

Using '/>' which is for self-closing tags, but

is not self-closing.

The

tag must be opened with a closing angle bracket '>' to start the list.

2fill in blank

medium

Complete the code to start a nested ordered list inside a list item.

HTML

<ul>
  <li>Fruits
    [1]
      <li>Apple</li>
      <li>Banana</li>
    </ol>
  </li>
</ul>

Drag options to blanks, or click blank then click option'

A<ol>

B<ul>

C<li>

D</ol>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of
for an ordered list.

Using closing tags like instead of opening tags.

To create a nested ordered list, use the

tag inside the list item.

3fill in blank

hard

Fix the error in the nested list by completing the closing tag.

HTML

<ul>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
    [1]
  </li>
</ul>

Drag options to blanks, or click blank then click option'

A</ul>

B</ol>

C<ul>

D<ol>

Attempts:

3 left

💡 Hint

Common Mistakes

Closing with which is for ordered lists.

Using opening tags instead of closing tags.

The nested unordered list must be closed with to be valid HTML.

4fill in blank

hard

Fill both blanks to create a nested unordered list inside a list item.

HTML

<ul>
  <li>Colors
    [1]
      <li>Red</li>
      <li>Blue</li>
    [2]
  </li>
</ul>

Drag options to blanks, or click blank then click option'

A<ul>

B</ol>

C</ul>

D<ol>

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing

and
tags.

Forgetting to close the nested list.

The nested list starts with

and ends with

to be valid.

5fill in blank

hard

Fill all three blanks to create a nested ordered list inside a list item with proper tags.

HTML

<ul>
  <li>Animals
    [1]
      <li>Dog</li>
      <li>Cat</li>
    [2]
  </li>
[3]

Drag options to blanks, or click blank then click option'

A<ol>

B</ol>

C</ul>

D</li>

Attempts:

3 left

💡 Hint

Common Mistakes

Not closing the outer unordered list.

Using wrong closing tags for nested lists.

The nested ordered list starts with

and ends with

. The outer unordered list closes with .

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