Complete Guide to HTML Unordered Lists: Using ul and li for Bullet Points

Note:
This page is part of the Complete HTML Guide for Beginners. Consult the main index for an overview of all topics.

---

Lists
Unordered

WHAT UNORDERED LISTS ARE AND HOW TO CREATE THEM IN HTML WITH <ul> AND <li>

Often, you need to present a list of items on a webpage where the order doesn't particularly matter. Think of a shopping list, the ingredients for a simple recipe, or a list of product features. For these situations, HTML provides the perfect tags: <ul> and <li>.

The <ul> element (which stands for Unordered List) acts as a container. It tells the browser: "Attention, here begins a list where the order of elements is not crucial."

Inside this container, each individual item in the list is enclosed in the <li> tag (which stands for List Item). So, for every item you want to add to your bulleted list, you'll use an <li> tag.

Let's look at a practical example. Suppose we want to create a simple shopping list for our "Simple Recipes" website:

<h2>Shopping List</h2>
<ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
    <li>Butter</li>
</ul>

How does it work?

• We started the list with the opening <ul> tag.
• For each grocery item, we used an <li> tag enclosing the product name. For example, <li>Milk</li>.
• We closed the entire list with the closing </ul> tag.

The Result in the Browser

When a browser interprets this code, it usually displays the list with bullet points in front of each <li> element. The exact appearance might vary slightly depending on the browser, but the concept is a list where the sequence isn't relevant (milk before or after eggs doesn't change the list's meaning).

Shopping List
• Milk
• Eggs
• Bread
• Butter

Key Points to Remember:

• Use <ul> to define an unordered list (where order doesn't matter).
• Use <li> to define each individual item within the <ul> list.
• The <ul> tag must always contain one or more <li> elements. Do not put text or other tags directly inside <ul> without first putting them in an <li>.

This type of list is ideal when you simply want to list items without a specific sequence. For lists where the order is important (like steps in a procedure), we'll use another type of list, which we'll cover soon.

---