HTML Lists – Solved Practice Questions

By /

HTML lists help organize information in a clear and structured format. They are commonly used to display menus, steps, features, categories, and grouped data on webpages. HTML provides ordered lists, unordered lists, and description lists, making it easy to present content in a readable and user-friendly way for every website.

Question 1

Problem Statement

Create an unordered list containing three programming languages.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Programming Languages</title>
</head>
<body>

    <h1>Programming Languages</h1>

    <ul>
        <li>Python</li>
        <li>Java</li>
        <li>C++</li>
    </ul>

</body>
</html>

Output

  • Python
  • Java
  • C++

Step-by-Step Explanation

  • <li> creates each list item.
  • The browser displays bullet points automatically.

Question 2

Problem Statement

Create an ordered list showing the first five steps to learn HTML.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Learn HTML</title>
</head>
<body>

    <h1>Steps to Learn HTML</h1>

    <ol>
        <li>Learn HTML basics</li>
        <li>Practice HTML tags</li>
        <li>Learn HTML attributes</li>
        <li>Create webpages</li>
        <li>Build projects</li>
    </ol>

</body>
</html>

Output

  1. Learn HTML basics
  2. Practice HTML tags
  3. Learn HTML attributes
  4. Create webpages
  5. Build projects

Step-by-Step Explanation

  • <ol> creates an ordered list.
  • <li> creates each item.
  • The browser automatically adds numbers.

Question 3

Problem Statement

Create an unordered list of three favorite foods.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Favorite Foods</title>
</head>
<body>

    <h1>My Favorite Foods</h1>

    <ul>
        <li>Pizza</li>
        <li>Burger</li>
        <li>Sandwich</li>
    </ul>

</body>
</html>

Output

  • Pizza
  • Burger
  • Sandwich

Step-by-Step Explanation

  • <ul> creates a bullet list.
  • Each food item is placed inside <li>.
  • You can add as many list items as required.

Question 4

Problem Statement

Create an ordered list showing the ranking of three students.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Student Ranking</title>
</head>
<body>

    <h1>Class Ranking</h1>

    <ol>
        <li>Rahul</li>
        <li>Ankit</li>
        <li>Priya</li>
    </ol>

</body>
</html>

Output

  1. Rahul
  2. Ankit
  3. Priya

Step-by-Step Explanation

  • <ol> is suitable when the order of items matters.
  • <li> defines each student.
  • Numbers are automatically generated.

Question 5

Problem Statement

Create a webpage that displays a shopping list using an unordered list.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Shopping List</title>
</head>
<body>

    <h1>Shopping List</h1>

    <ul>
        <li>Milk</li>
        <li>Bread</li>
        <li>Eggs</li>
        <li>Rice</li>
        <li>Apples</li>
    </ul>

</body>
</html>

Output

  • Milk
  • Bread
  • Eggs
  • Rice
  • Apples

Step-by-Step Explanation

  • <ul> creates the list.
  • Each product is written inside <li>.
  • An unordered list is useful when the order of items does not matter.

Question 6

Problem Statement

Create an ordered list showing the steps to make a cup of tea.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Making Tea</title>
</head>
<body>

    <h1>Steps to Make Tea</h1>

    <ol>
        <li>Boil water</li>
        <li>Add tea leaves</li>
        <li>Add milk</li>
        <li>Add sugar</li>
        <li>Serve the tea</li>
    </ol>

</body>
</html>

Output

  1. Boil water
  2. Add tea leaves
  3. Add milk
  4. Add sugar
  5. Serve the tea

Step-by-Step Explanation

  • <ol> creates a numbered list.
  • <li> creates each step.
  • An ordered list is useful when items must follow a specific sequence.

Question 7

Problem Statement

Create a webpage that displays a list of web development skills.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Web Development Skills</title>
</head>
<body>

    <h1>My Skills</h1>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>Git</li>
        <li>Responsive Web Design</li>
    </ul>

</body>
</html>

Output

  • HTML
  • CSS
  • JavaScript
  • Git
  • Responsive Web Design

Step-by-Step Explanation

  • <ul> creates an unordered list.
  • Each skill is placed inside <li>.
  • This type of list is commonly used on portfolio and resume webpages.

Question 8

Problem Statement

Create a nested list showing three programming categories and languages under each category.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Programming Categories</title>
</head>
<body>

    <h1>Programming Languages</h1>

    <ul>
        <li>Web Development
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>

        <li>General Programming
            <ul>
                <li>Python</li>
                <li>Java</li>
                <li>C++</li>
            </ul>
        </li>
    </ul>

</body>
</html>

Output

  • Web Development
    • HTML
    • CSS
    • JavaScript
  • General Programming
    • Python
    • Java
    • C++

Step-by-Step Explanation

  • A list can contain another list.
  • The second <ul> is placed inside the parent <li>.
  • This creates a nested list.
  • Nested lists are useful for categories and subcategories.

Question 9

Problem Statement

Create an ordered list that starts numbering from 5.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Starting Number</title>
</head>
<body>

    <h1>Competition Winners</h1>

    <ol start="5">
        <li>Rahul</li>
        <li>Ankit</li>
        <li>Priya</li>
    </ol>

</body>
</html>

Output

  1. Rahul
  2. Ankit
  3. Priya

Step-by-Step Explanation

  • <ol> creates an ordered list.
  • start="5" tells the browser to begin numbering from 5.
  • The following items are numbered automatically.

Question 10

Problem Statement

Create a restaurant menu using an unordered list with categories and nested food items.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Restaurant Menu</title>
</head>
<body>

    <h1>Food Corner Menu</h1>

    <ul>
        <li>Starters
            <ul>
                <li>Spring Rolls</li>
                <li>French Fries</li>
            </ul>
        </li>

        <li>Main Course
            <ul>
                <li>Pizza</li>
                <li>Veg Burger</li>
            </ul>
        </li>

        <li>Desserts
            <ul>
                <li>Ice Cream</li>
                <li>Brownie</li>
            </ul>
        </li>
    </ul>

</body>
</html>

Output

  • Starters
    • Spring Rolls
    • French Fries
  • Main Course
    • Pizza
    • Veg Burger
  • Desserts
    • Ice Cream
    • Brownie

Step-by-Step Explanation

  • The outer <ul> contains the main menu categories.
  • Each category uses an <li>.
  • A second <ul> creates food items under each category.
  • This is called a nested list.

Key Takeaways

  • <ul> creates an unordered list.
  • <ol> creates an ordered list.
  • <li> creates a list item.
  • Use <ol> when the order of items matters.
  • Use <ul> when the order does not matter.
  • Lists can contain other lists.
  • start can change the starting number of an ordered list.

Frequently Asked Questions (FAQs)

1. Which tag creates an unordered list?

The <ul> tag creates an unordered list.

2. Which tag creates an ordered list?

The <ol> tag creates an ordered list.

3. Which tag creates a list item?

The <li> tag creates an individual list item.

4. What is a nested list?

A nested list is a list placed inside another list item.

5. When should I use <ol>?

Use <ol> when the order or sequence of items is important.

6. When should I use <ul>?

Use <ul> when the order of items is not important.

7. Can an ordered list start with a number other than 1?

Yes. Use the start attribute, such as <ol start="5">.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top