HTML Lists

Webpages often contain information that needs to be organized clearly. HTML provides lists and tables to help us organize this information. For example, you may want to show:

• A list of your hobbies
• Steps to complete a task
• Student marks
• Product prices

Let’s understand HTML Lists more clearly.

HTML Lists

A list is used when we want to show several related items. HTML has two main types of lists:

• Unordered list – shows items with bullet points.
• Ordered list – shows items with numbers.

Let’s start with an unordered list.

Unordered List in HTML

An unordered list uses the <ul> tag. Each item inside the list uses the <li> tag. Here is a complete example:

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

    <h1>My Hobbies</h1>

    <ul>
        <li>Playing Cricket</li>
        <li>Listening to Music</li>
        <li>Watching Movies</li>
    </ul>

</body>
</html>

Output

My Hobbies
• Playing Cricket
• Listening to Music
• Watching Movies

Here:

• <ul> – Creates an unordered list.
• <li> – Creates a list item.
• </ul> – Ends the list.

The browser automatically adds bullet points.

Ordered List in HTML

Sometimes the order of the items is important. For this, we use the <ol> tag. For example, suppose we want to show steps for making tea.

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

    <h1>How to Make Tea</h1>

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

</body>
</html>

Output

How to Make Tea
1. Boil some water.
2. Add tea leaves.
3. Add milk and sugar.
4. Serve the tea.

Here:

• <ol> – Creates an ordered list.
• <li> – Creates a list item.

The browser automatically adds numbers.

Unordered List vs Ordered List

The main difference is simple:

<ul> → Bullet points
<ol> → Numbers

Use <ul> when the order does not matter.

For example:

• Cricket
• Football
• Music

Use <ol> when the order matters.

For example:

1. Open the file.
2. Write the code.
3. Save the file.
4. Run the program.

Nested Lists in HTML

You can also put one list inside another list. This is called a nested list. For example, we can create a list of subjects and put topics under each subject.

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

    <h1>My Subjects</h1>

    <ul>
        <li>
            Computer Science
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </li>

        <li>
            Mathematics
            <ul>
                <li>Algebra</li>
                <li>Geometry</li>
            </ul>
        </li>
    </ul>

</body>
</html>

Output

My Subjects
• Computer Science
ㅤㅤㅤ○ HTML
ㅤㅤㅤ○ CSS
ㅤㅤㅤ○ JavaScript
• Mathematics
ㅤㅤㅤ○ Algebra
ㅤㅤㅤ○ Geometry

The second list is placed inside the first list item.

Quick Recap

• <ul> creates an unordered list with bullet points.
• <ol> creates an ordered list with numbers.
• <li> creates an individual list item.
• Use <ul> when the order of items does not matter.
• Use <ol> when the order of items matters.
• Nested list is a list placed inside another list item.
• HTML lists help you organize related information clearly on a webpage.

Mini Quiz

0%

HTML - QUIZ 5

1 / 5

Q1. You are making a list of hobbies where the order does not matter. Which type of list should you use?

Ordered list

Unordered list

Nested list

Numbered list

2 / 5

Q2. You are creating steps for completing a task, and the steps must be followed in order. Which type of list is suitable?

Ordered list

Unordered list

Nested list

Bullet list

3 / 5

Q3. A webpage displays hobbies with bullet points automatically. Which type of list is being used?

Ordered list

Unordered list

Nested list

Numbered list

4 / 5

Q4. You want to create a list of subjects and place topics such as HTML, CSS, and JavaScript under Computer Science. What type of list is this?

Ordered list

Unordered list

Nested list

Numbered list

5 / 5

Q5. In an HTML list, what is used to create each individual item?

A list item

A heading

A paragraph

A table item

Your score is

The average score is 0%

0%

By Wordpress Quiz plugin

<!DOCTYPE html>
<html>
<head>
    <title>My Daily Routine</title>
</head>
<body>

    <h1>My Daily Routine</h1>

    <h2>My Morning Routine</h2>

    <ol>
        <li>Wake up</li>
        <li>Brush my teeth</li>
        <li>Have breakfast</li>
        <li>Get ready for school</li>
    </ol>

    <h2>My Favorite Activities</h2>

    <ul>
        <li>Playing Cricket</li>
        <li>Listening to Music</li>
        <li>Reading Books</li>
    </ul>

    <h2>My Day</h2>

    <ul>
        <li>
            Morning
            <ul>
                <li>Go to School</li>
                <li>Attend Classes</li>
            </ul>
        </li>

        <li>
            Evening
            <ul>
                <li>Play Cricket</li>
                <li>Study</li>
            </ul>
        </li>
    </ul>

</body>
</html>

Frequently Asked Questions (FAQs)

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

Nidhi Srivastav