Home Blog Contact

Web Design Tutorial — Lesson 20 of 27 [ Updated: 11 Aug 2026 ]

HTML Lists Explained – Ordered, Unordered & Nested Lists

Learning Objectives

After completing this tutorial, you will be able to:

  • Create unordered lists.

  • Create ordered lists.

  • Add items using <li>.

  • Create nested lists.

  • Choose the correct list type for different situations.

Table of Contents

  1. Introduction

  2. What Is an HTML List?

  3. Unordered Lists

  4. Ordered Lists

  5. List Items

  6. Nested Lists

  7. Real-World Examples

  8. Best Practices

  9. Common Beginner Mistakes

  10. Practice Exercise

  11. Assignment

  12. Summary

  13. Frequently Asked Questions

  14. Next Tutorial

Introduction

Websites often need to display information in a structured way.

For example:

  • A navigation menu

  • A list of services

  • A shopping list

  • Steps in a tutorial

  • Features of a product

  • A list of skills

Writing all of this as plain paragraphs would make the information difficult to scan.

HTML provides lists to solve this problem.

There are two main types of lists you'll use frequently:

  • Unordered lists

  • Ordered lists

What Is an HTML List?

An HTML list is a collection of related items.

HTML provides three important elements for creating lists:

<ul> → Unordered list
<ol> → Ordered list
<li> → List item

The <li> element represents an individual item inside a list.

Unordered Lists

An unordered list displays items using bullet points.

It is created using the <ul> element.

Example:

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

The browser will display something similar to:

• HTML
• CSS
• JavaScript

Use an unordered list when the order of the items does not matter.

When Should You Use <ul>?

Imagine you're listing your web development skills:

<h2>My Skills</h2>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ul>

It doesn't matter whether HTML appears before CSS or PHP.

The information is simply a collection of related skills.

Therefore, an unordered list is appropriate.

Ordered Lists

An ordered list displays items in a specific sequence.

It is created using the <ol> element.

Example:

<ol>
    <li>Open your code editor.</li>
    <li>Create an HTML file.</li>
    <li>Write your HTML code.</li>
    <li>Open the file in a browser.</li>
</ol>

The browser will display:

1. Open your code editor.
2. Create an HTML file.
3. Write your HTML code.
4. Open the file in a browser.

Use an ordered list when the sequence matters.

When Should You Use <ol>?

Consider a recipe.

The steps must be completed in a particular order.

<h2>How to Make Tea</h2>

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

Changing the order could change the result.

Therefore, an ordered list is the correct choice.

List Items

The <li> element represents an individual list item.

For example:

<li>HTML</li>

The <li> element normally appears inside either:

<ul>

or:

<ol>

A complete list looks like this:

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

The <ul> defines the list, while <li> defines each item.

Nested Lists

Sometimes a list needs another list inside it.

This is called a nested list.

Example:

<ul>
    <li>Web Design
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>

    <li>Programming
        <ul>
            <li>JavaScript</li>
            <li>PHP</li>
        </ul>
    </li>
</ul>

The structure becomes:

• Web Design
    • HTML
    • CSS
• Programming
    • JavaScript
    • PHP

Nested lists are useful when information has multiple levels.

Real-World Example: Website Navigation

Lists are commonly used to structure navigation menus.

For example:

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

Later, CSS will transform this simple list into a professional navigation bar.

This is a good example of how HTML provides the structure, while CSS provides the design.

Best Practices

Choose the correct list type

Use <ul> when order doesn't matter.

Use <ol> when sequence matters.

Don't choose a list simply because you like the visual appearance.

Keep list items meaningful

Good:

<ul>
    <li>Responsive Design</li>
    <li>Website Development</li>
    <li>SEO Optimization</li>
</ul>

Avoid creating list items that contain unrelated information.

Use nested lists carefully

Nested lists are useful, but too many levels can make information difficult to understand.

Keep your structure as simple as possible.

Common Beginner Mistakes

Mistake 1

Using <li> without a list.

Avoid:

<li>HTML</li>
<li>CSS</li>

Better:

<ul>
    <li>HTML</li>
    <li>CSS</li>
</ul>

Mistake 2

Using <ol> when order doesn't matter.

For example, a list of hobbies doesn't normally require numbering.

Use:

<ul>
    <li>Reading</li>
    <li>Photography</li>
    <li>Traveling</li>
</ul>

Mistake 3

Using paragraphs to create lists.

Don't manually type:

<p>1. HTML</p>
<p>2. CSS</p>
<p>3. JavaScript</p>

Use an ordered list instead:

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

This provides proper semantic structure.

Practice Exercise

Create two lists.

List 1: Favorite Foods

Use <ul>:

<h2>My Favorite Foods</h2>

<ul>
    <li>Pizza</li>
    <li>Rice</li>
    <li>Chicken</li>
</ul>

List 2: Learning Steps

Use <ol>:

<h2>My Learning Steps</h2>

<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Learn JavaScript</li>
</ol>

Refresh your browser and compare the two lists.

Assignment

Create a page called "My Web Development Roadmap."

Include:

An ordered list

Show the order in which you plan to learn:

  1. HTML

  2. CSS

  3. JavaScript

  4. PHP

An unordered list

Show your current skills:

  • HTML

  • Basic CSS

  • Basic JavaScript

A nested list

Organize your learning into categories:

Web Development
    Frontend
        HTML
        CSS
        JavaScript
    Backend
        PHP
        MySQL

Try to build this structure yourself.

Summary

In this tutorial, you learned how HTML lists organize related information.

You learned:

  • <ul> creates unordered lists.

  • <ol> creates ordered lists.

  • <li> creates individual list items.

  • Lists can contain other lists.

  • Lists are commonly used for navigation, features, instructions, and structured information.

Lists are simple HTML elements, but you'll use them frequently when building real websites.

Frequently Asked Questions

What is the difference between <ul> and <ol>?

<ul> creates an unordered list, while <ol> creates an ordered list.

Can an ordered list contain links?

Yes.

<ol>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ol>

Can I create a list inside another list?

Yes. This is called a nested list.

Can CSS change the appearance of lists?

Yes. CSS can change bullets, numbering, spacing, alignment, and much more.

Next Tutorial

HTML Tables – Creating Rows, Columns, Headers, and Data

In the next tutorial, you'll learn how to display structured information using HTML tables. You'll create rows and columns, use table headers, and build your first professional-looking data table.

← Previous Next →