Unordered lists in HTML

Introduction

Unordered lists help you show a group of items where order does not matter. They make content easy to read and understand.

To list grocery items you need to buy.

To show features of a product on a webpage.

To display steps that can be done in any order.

To organize ideas or points in a simple way.

To create menus or navigation links on a website.

Syntax

HTML

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

The <ul> tag starts the unordered list.

Each item inside the list is wrapped in a <li> tag.

Examples

This creates a simple bullet list of fruits.

HTML

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

Use unordered lists for steps when order is not important.

HTML

<ul>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ul>

Unordered lists are often used for website menus.

HTML

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Sample Program

This webpage shows a simple unordered list of fruits with bullet points. The list uses semantic HTML and includes an ARIA label for accessibility. The style makes the list easy to read and visually pleasant.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unordered List Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f9f9f9;
      color: #333;
    }
    ul {
      background-color: #fff;
      padding: 1rem 2rem;
      border-radius: 0.5rem;
      max-width: 300px;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }
    li {
      margin-bottom: 0.5rem;
      line-height: 1.4;
    }
  </style>
</head>
<body>
  <h1>My Favorite Fruits</h1>
  <ul aria-label="List of favorite fruits">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Date</li>
  </ul>
</body>
</html>

Important Notes

Unordered lists use bullet points by default to show items.

They are good when the order of items does not matter.

Use the aria-label attribute to help screen readers understand the list.

Summary

Unordered lists group items with bullet points.

Use <ul> for the list and <li> for each item.

They improve readability and structure on web pages.

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