HTML Lists

By /

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.

Frequently Asked Questions (FAQs)

Q1. What are HTML lists?

HTML lists are used to organize related items clearly on a webpage. HTML provides ordered and unordered lists.

Q2. What is an unordered list in HTML?

An unordered list uses the <ul> tag and normally displays its items with bullet points.

Q3. What is an ordered list in HTML?

An ordered list uses the <ol> tag and normally displays its items with numbers.

Q4. What is the <li> tag in HTML?

The <li> tag is used to create an individual item inside an HTML list.

Q5. What is a nested list in HTML?

A nested list is a list placed inside another list item. It is useful for creating sub-items and subcategories.

Q6. What is the difference between <ul> and <ol> in HTML?

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

Q7. When should you use an ordered list in HTML?

Use an ordered list when the order of the items is important, such as steps in a process or instructions.

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

Related Posts

Scroll to Top