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 .