MakeW3web

Nested Lists

Nested lists in HTML refer to the practice of placing a list inside another list, which is useful for organizing content into hierarchical structures. You can create nested lists using ordered lists (`<ol>`), unordered lists (`<ul>`), or even definition lists (`<dl>`). To create a nested list, place a new `<ol>`, `<ul>`, or `<dl>` element inside a `<li>` (list item) or `<dd>` (description definition) element of the parent list.

Here are some examples of nested lists:

  1. 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
  1. Nested ordered lists:
<ol>
  <li>Step one
    <ol>
      <li>Substep A</li>
      <li>Substep B</li>
      <li>Substep C</li>
    </ol>
  </li>
  <li>Step two
    <ol>
      <li>Substep D</li>
      <li>Substep E</li>
      <li>Substep F</li>
    </ol>
  </li>
</ol>

Output:

  1. Step one

    1. Substep A
    2. Substep B
    3. Substep C
  2. Step two

    1. Substep D
    2. Substep E
    3. Substep F
  1. Mixed nested lists (unordered and ordered):

<ul>
  <li>Breakfast
    <ol>
      <li>Eggs</li>
      <li>Bacon</li>
      <li>Toast</li>
    </ol>
  </li>
  <li>Lunch
    <ol>
      <li>Sandwich</li>
      <li>Salad</li>
      <li>Soup</li>
    </ol>
  </li>
</ul>

Output:

  • Breakfast
    1. Eggs
    2. Bacon
    3. Toast
  • Lunch
    1. Sandwich
    2. Salad
    3. Soup

Nested lists are useful for organizing content in a structured and hierarchical manner. They can be used for various purposes, such as creating multilevel navigation menus, outlining content, or displaying hierarchical data. Using nested lists can improve the readability and accessibility of your content.

Was this page helpful?