Unordered lists in HTML - Mini Project: Build & Apply

Create a Simple Unordered List in HTML

📖 Scenario: You want to make a simple webpage that shows a list of your favorite fruits. This list should be easy to read and clearly separated.

🎯 Goal: Build a basic HTML page that includes an unordered list with three fruit names.

📋 What You'll Learn

Use semantic HTML5 structure with <html>, <head>, and <body> tags

Include a <title> in the head

Create an unordered list using <ul> with exactly three list items <li>

Each list item must contain one fruit name: Apple, Banana, Cherry

💡 Why This Matters

🌍 Real World

Unordered lists are used on websites to show groups of items like features, steps, or menus in a clear, easy-to-read way.

💼 Career

Knowing how to create and structure lists is a basic skill for web developers to organize content effectively and improve user experience.

1

Set up the basic HTML structure

Write the basic HTML skeleton with <html lang="en">, <head> containing <meta charset="UTF-8"> and <title> with text Favorite Fruits, and an empty <body>.

HTML

Hint

Remember to include <html lang="en"> and a <title> inside the <head>.

2

Add an unordered list container

Inside the <body>, add an unordered list element using <ul> to hold the fruit items.

HTML

    
    Favorite Fruits


    

Hint

Use the <ul> tag to create an unordered list container inside the body.

3

Add list items for fruits

Inside the <ul>, add three list items using <li> tags with the exact text: Apple, Banana, and Cherry.

HTML

    
    Favorite Fruits


    
        
    

Hint

Use three <li> tags inside the <ul> with the fruit names exactly as given.

4

Add a heading above the list

Above the <ul>, add a heading using the <h1> tag with the text My Favorite Fruits.

HTML

    
    Favorite Fruits


    
    
        Apple
        Banana
        Cherry
    

Hint

Use the <h1> tag to add a main heading above the list.

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