Unordered lists are perfect for grouping items where the specific order is not important. Think of a shopping list or a list of features; the sequence doesn't change the meaning. These lists are created using the <ul> tag, with each item inside enclosed in an <li> tag. By default, web browsers display these list items with a bullet point.

The <ul> and <li> elements

The <ul> element formally defines the beginning and end of an unordered list. Inside the <ul> container, every list item must be wrapped in its own <li> (list item) element. This structure is crucial for creating well-formed, semantic HTML that is both readable by browsers and accessible to screen readers.

Example 1: Simple Fruit List

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

Explanation

The <ul> tag creates the list, and each fruit is placed within an <li> tag. The browser will render this as a simple bulleted list, which is ideal for items that don't have a specific sequence.

Example 2: Website Navigation Menu

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Explanation

Here, the <ul> element structures a navigation menu. Each <li> contains an <a> (anchor) tag to create a clickable link. CSS is typically used to style this list to look like a horizontal navigation bar.

Example 3: Nested Unordered List

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black Tea</li>
      <li>Green Tea</li>
    </ul>
    </li>
  <li>Milk</li>
</ul>

Explanation

A nested list is created by placing a new <ul> element inside of an <li> element. This is useful for creating sub-items or categories, which browsers will typically display with a different bullet style and indentation.

Example 4: List of Product Features

<ul>
  <li><strong>Feature 1:</strong> Lightweight Design</li>
  <li><strong>Feature 2:</strong> Long Battery Life</li>
  <li><strong>Feature 3:</strong> Water Resistant</li>
</ul>

Explanation

This code uses an unordered list to present product benefits clearly. The <strong> tag is used to add emphasis to the feature number, making the list scannable and easy for users to read.

Example 5: A "To-Do" List

<h3>My Weekend Chores:</h3>
<ul>
  <li>Mow the lawn</li>
  <li>Go grocery shopping</li>
  <li>Wash the car</li>
</ul>

Explanation

This example demonstrates a straightforward to-do list. The <ul> tag is the appropriate choice because the order in which these chores are completed is flexible, fulfilling the purpose of an unordered list.