HTML Unordered List

When it comes to displaying information in a structured and organized manner on a web page, HTML lists can be incredibly useful. In this guide, we'll focus on the HTML unordered list and its various features, including nesting lists, unordered lists inside unordered lists, ordered lists inside unordered lists, and multi-level nesting of unordered lists.

HTML Unordered List Basics

An HTML unordered list is a way to display a list of items that are unordered, or not necessarily in a particular order. Each item is displayed as a bullet point, with the option to customize the bullet point style using CSS.

Here's an example of an HTML unordered list:

1<ul>
2  <li>Item 1</li>
3  <li>Item 2</li>
4  <li>Item 3</li>
5</ul>

This will output a simple unordered list with three items, each displayed as a bullet point:

  • Item 1
  • Item 2
  • Item 3

Nesting Lists

One of the powerful features of HTML lists is the ability to nest one list inside another. This allows you to create more complex and organized lists.

Unordered List inside Unordered List

Here's an example of an unordered list nested inside another unordered list:

1<ul>
2  <li>Item 1</li>
3  <li>Item 2
4    <ul>
5      <li>Sub-item 1</li>
6      <li>Sub-item 2</li>
7    </ul>
8  </li>
9  <li>Item 3</li>
10</ul>

This will output an unordered list with three items, where the second item contains a nested unordered list with two sub-items:

  • Item 1
  • Item 2
    • Sub-item 1
    • Sub-item 2
  • Item 3

Ordered List inside Unordered List

You can also nest an ordered list inside an unordered list, like this:

1<ul>
2  <li>Item 1</li>
3  <li>Item 2
4    <ol>
5      <li>Sub-item 1</li>
6      <li>Sub-item 2</li>
7    </ol>
8  </li>
9  <li>Item 3</li>
10</ul>

This will output an unordered list with three items, where the second item contains a nested ordered list with two sub-items:

  • Item 1
  • Item 2
    1. Sub-item 1
    2. Sub-item 2
  • Item 3

Multi-level Nesting of Unordered List

You can even create multi-level nesting of unordered lists, like this:

1<ul>
2  <li>Item 1</li>
3  <li>Item 2
4    <ul>
5      <li>Sub-item 1</li>
6      <li>Sub-item 2
7        <ul>
8          <li>Sub-sub-item 1</li>
9          <li>Sub-sub-item 2</li>
10        </ul>
11      </li>
12    </ul>
13  </li>
14  <li>Item 3</li>
15</ul>

This will output an unordered list with three items, where the second item contains a nested unordered list with two sub-items, and the second sub-item contains another nested unordered list with two sub-sub-items:

  • Item 1
  • Item 2
    • Sub-item 1
    • Sub-item 2
      • Sub-sub-item 1
      • Sub-sub-item 2
  • Item 3