Unordered lists in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create an unordered list.

HTML

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

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

A<ul>

B<ol>

C<li>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of
for unordered lists.

Forgetting to open the list with

.

The

tag starts an unordered list. Here, it is the correct opening tag.

2fill in blank

medium

Complete the code to add a list item inside the unordered list.

HTML

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

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

A<div>

B<ul>

C<ol>

D<li>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or
instead of
1. for list items.

Forgetting to close the list item with .

Each item in a list uses the

tag inside the

or
tags.

3fill in blank

hard

Fix the error in the unordered list code by completing the blank.

HTML

<ul>
  <li>Milk</li>
  [1]Bread</li>
</ul>

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

A<ul>

B<ol>

C<li>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or
inside the list instead of
1. .

Missing the opening tag for the list item.

Each list item must start with

to be valid inside a list.

4fill in blank

hard

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

HTML

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

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

A<ul>

B</ul>

C</li>

D<li>

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

instead of

or

for nested lists.

Not closing the nested list properly.

Nested lists use

to start and

to end inside a list item.

5fill in blank

hard

Fill all three blanks to create an unordered list with three items.

HTML

<ul>
  [1]Apple[2]
  [3]Banana</li>
  <li>Cherry</li>
</ul>

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

A<li>

B</li>

D</ul>

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to close list items with .

Using incorrect tags like

inside list items.

Each list item starts with

and ends with

. The list ends with but that is already present.

Practice

1. What HTML tag is used to create an unordered list?

easy

A. <li>

B. <ol>

C. <ul>

D. <list>

Solution

1. Step 1: Understand list types in HTML

   <ul> creates unordered lists with bullet points, while <ol> creates ordered lists with numbers.

2. Step 2: Identify the correct tag for unordered lists

   The tag <ul> is specifically for unordered lists.

3. Final Answer:

   <ul> -> Option C

4. Quick Check:

   Unordered list tag = <ul> [OK]

Hint: Unordered lists always start with <ul> tag [OK]

Common Mistakes:

• Confusing <ul> with <ol>
• Using <li> as the list container
• Using non-standard tags like <list>

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

easy

A. Item

B. Item

C. Item

D. Item

Solution

1. Step 1: Identify the correct tag for list items

   List items must be inside <li> tags.

2. Step 2: Check the correct nesting of tags

   The <li> tags go inside the <ul> tags, not the other way around.

3. Final Answer:

   <ul><li>Item</li></ul> -> Option B

4. Quick Check:

   List item inside <ul> uses
5. [OK]

Hint: List items always go inside <li> tags within <ul> [OK]

Common Mistakes:

• Swapping <ul> and <li> tags
• Using <item> instead of <li>
• Using non-standard <list> tag

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

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

medium

A. A bulleted list with Apple, Banana, Cherry

B. An error message because of missing tags

C. Plain text: Apple Banana Cherry without bullets or numbers

D. A numbered list with Apple, Banana, Cherry

Solution

1. Step 1: Recognize the list type from the tag

   The <ul> tag creates an unordered list which shows bullet points.

2. Step 2: Understand the list items

   Each <li> creates a bullet point with the text inside it.

3. Final Answer:

   A bulleted list with Apple, Banana, Cherry -> Option A

4. Quick Check:

   <ul> = bulleted list [OK]

Hint: Unordered lists show bullets, ordered lists show numbers [OK]

Common Mistakes:

• Confusing <ul> with <ol>
• Expecting numbers instead of bullets
• Thinking it shows plain text without bullets

4. Identify the error in this unordered list code:

<ul>
  <li>First</li>
  <li>Second
</ul>

medium

A. No error, code is correct

B. Using <ul> instead of <ol>

C. Extra closing tag for <ul>

D. Missing closing tag for the second <li>

Solution

1. Step 1: Check each list item tag

   The first <li> has a closing tag, but the second <li> does not.

2. Step 2: Confirm proper HTML structure

   Every <li> must have a closing </li> tag to be valid.

3. Final Answer:

   Missing closing tag for the second <li> -> Option D

4. Quick Check:

   All
5. tags must be closed [OK]

Hint: Every

needs a closing

tag [OK]

Common Mistakes:

• Forgetting to close <li> tags
• Confusing <ul> with <ol>
• Ignoring missing closing tags

5. You want to create a nested unordered list where 'Fruits' has sub-items 'Apple' and 'Banana'. Which code correctly achieves this?

hard

A. FruitsAppleBanana

B. FruitsAppleBanana

C. FruitsAppleBanana

D. FruitsAppleBanana

Solution

1. Step 1: Understand nested list structure

   Nested lists must be inside a list item <li> of the parent list.

2. Step 2: Check correct nesting in options

   • Fruits
     • Apple
     • Banana
   correctly nests a <ul> inside the <li> for 'Fruits'. Other options either miss closing tags or place nested lists incorrectly.

3. Final Answer:

   <ul><li>Fruits<ul><li>Apple</li><li>Banana</li></ul></li></ul> -> Option A

4. Quick Check:

   Nested
   inside
   • for sublist [OK]

Hint: Put nested <ul> inside a parent <li> tag [OK]

Common Mistakes:

• Placing nested <ul> outside <li>
• Missing closing tags in nested lists
• Using multiple <li> without nesting