HTML <ul> and <li>: Unordered Lists

An unordered list groups related items when sequence is not important, such as materials for class. Each list entry belongs in an li element. The important question is always where the link leads and whether the person reading the page can predict it.

What You Need to Know

A list expresses more than a bullet-shaped appearance. Screen readers can announce its items and boundaries, which helps visitors follow grouped information.

Example: See It in Action

This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<h2>Bring these things</h2>
<ul>
    <li>Notebook</li>
    <li>Pencil</li>
    <li>Water bottle</li>
</ul>

Let’s Understand the Example

• Li is one item inside a list. Keep each item inside its parent list.
• Ul groups items where the order does not matter.
• An h2 starts a major section beneath the page topic.

You should see distinct list items. Ask whether their order carries meaning: if the order matters, use an ordered list; otherwise use an unordered list.

What Should You See?

The page should show a section headed “Bring these things”. Inspect the navigation region and follow its links to check the destinations.

Imagine this link is read out of context. Would its text still explain the destination? Rename unclear links before trying to make them look nicer with CSS.

Try It Yourself

1. Add another item to the list and change the order without changing its meaning.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Typing bullet characters into separate paragraphs instead of using ul and li.
• Avoid dead links, empty href values and clickable-looking text without a real destination.

Key Takeaways

• An unordered list groups related items when sequence is not important, such as materials for class.
• Li is one item inside a list. Keep each item inside its parent list.
• A list expresses more than a bullet-shaped appearance. Screen readers can announce its items and boundaries, which helps visitors follow grouped information.