HTML Unordered Lists: The <ul> Tag

Learn to create bulleted lists with the <ul> and <li> tags—an essential skill for organizing content on any webpage.

📋

Welcome! Let's learn how to create bulleted lists, like a shopping list or a list of features, using HTML.

/* Get ready to organize content! */

The Basic Syntax

The structure of an unordered list is simple and hierarchical. You start with a <ul> (unordered list) tag, which acts as the main container. Inside it, each individual item is wrapped in its own <li> (list item) tag.

When to Use Unordered Lists

Unordered lists are ideal for items where the sequence is not important. Think of a shopping list, a list of a product's features, or navigation links in a website's menu. Browsers display these by default with a bullet point for each item.

Creating Sub-Lists (Nesting)

You can create more complex, hierarchical lists by "nesting" one list inside another. To do this, you place a new <ul> element directly inside an <li> element. This is useful for creating sub-items or dropdown menus.

Practice Zone

Interactive Test 1: Assemble the List

Drag the tags to assemble a correct unordered list.

Arrastra en el orden correspondiente.


Arrastra las opciones:

<ul>
<li>Apples</li>
</ul>
<li>Bananas</li>

Completa el código:

...______
...______
...______
...______
Unlock with Premium

Interactive Test 2: Complete the Tags

Rellena los huecos en cada casilla.

<>
  <>First Item</>
  <>Second Item</>
</>
Unlock with Premium

Practice Example: Your Own List

Create an unordered list with three of your favorite hobbies.

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<ul> <li>Reading</li> <li>Hiking</li> <li>Coding</li> </ul>
Unlock with Premium

Knowledge Check

Which tag is used for the individual items *inside* an unordered list?


Unlock with Premium

Lists in the Wild: From Navbars to Features

Unordered lists are one of the most common elements in web design. They are the backbone of navigation menus, feature lists, and much more.

1. The Foundation of Navigation Menus

Almost every website navigation bar you see is built with a <ul>. CSS is then used to remove the bullet points and arrange the list items horizontally.

/* Basic CSS for a navbar */
.navbar ul {
  list-style-type: none;
  display: flex;
  gap: 1rem;
}
  • Home
  • About
  • Contact

2. Highlighting Product Features

When you want to quickly show the benefits of a product, a bulleted list is perfect. You can use CSS to replace the standard bullets with custom icons, like checkmarks.

/* CSS for custom bullets */
.features li::before {
  content: '✅';
  margin-right: 8px;
}
  • ✅ Fast Shipping
  • ✅ 24/7 Support
  • ✅ Easy Returns
Practical Takeaway: Master the <ul> and <li> tags. They are a simple but incredibly powerful and versatile tool for structuring content on any webpage.

HTML Lists Glossary

<ul>
Stands for **Unordered List**. It's the container element for a list of items where the order does not matter. It typically renders with bullet points.
<li>
Stands for **List Item**. This tag defines each individual item within a list. It must be a direct child of a <ul> or <ol> element.
<ol>
Stands for **Ordered List**. A related tag used for lists where the order *is* important, like a recipe or a ranking. It renders with numbers by default.
Nesting
The practice of placing one list (e.g., a <ul>) inside a list item (<li>) of another list. This creates a sub-list or a hierarchical structure.