MakeW3web

Unordered lists

Unordered lists in HTML are used to display a collection of items where the order is not important. They are created using the `<ul>` element, which stands for "unordered list". Each item within the list is represented by a `<li>` element, which stands for "list item".

By default, unordered lists display items with bullet points. Here's a basic example of an unordered list:

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

Output:

  • Coffee
  • Tea
  • Milk

You can also create nested lists by including a `<ul>` or `<ol>` element inside a `<li>` element. Here's an example of nested unordered lists:

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
</ul>

Output:

  • Fruits
    • Apple
    • Banana
    • Orange
  • Vegetables
    • Carrot
    • Broccoli
    • Spinach

Here's a combined example demonstrating the use of unordered lists and nested lists:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Unordered Lists Example</title>
</head>
<body>
    <h1>Unordered Lists</h1>
    
    <h2>Basic Unordered List</h2>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
    
    <h2>Nested Unordered Lists</h2>
    <ul>
        <li>Fruits
            <ul>
                <li>Apple</li>
                <li>Banana</li>
                <li>Orange</li>
            </ul>
        </li>
        <li>Vegetables
            <ul>
                <li>Carrot</li>
                <li>Broccoli</li>
                <li>Spinach</li>
            </ul>
        </li>
    </ul>
</body>
</html>

Unordered lists are useful for organizing and displaying related items, making it easier for users to read and understand the content. They can be used for various purposes, such as listing product features, navigation menus, or simple bullet-point lists.

Was this page helpful?