How to Properly Nest Lists in HTML

See HTML: Tips and Tricks for similar articles.
Looking to improve your HTML skills? Check out Webucator’s HTML classes.

A nested list or a sublist is a list within a list. The trick to marking nested lists up correctly in HTML is to recognize that the sublist is actually a child of a list item and not of a list.

  1. Start by creating a list. It can be ordered or unordered:
    <ul>
      <li>Fruit</li>
      <li>Vegetables</li>
      <li>Meat</li>
    </ul>
  2. Now add a nested list to the first list item:
    <ul>
      <li>Fruit
        <ul>
          <li>Bananas</li>
          <li>Apples</li>
          <li>Pears</li>
        </ul>
      </li>
      <li>Vegetables</li>
      <li>Meat</li>
    </ul>
    Notice that the sublist is a child and not a sibling of an <li> tag.
  3. And you can keep adding levels:
    <ul>
      <li>Fruit
        <ul>
          <li>Bananas</li>
          <li>Apples
            <ul>
              <li>Green</li>
              <li>Red</li>
            </ul>
          </li>
          <li>Pears</li>
        </ul>
      </li>
      <li>Vegetables</li>
      <li>Meat</li>
    </ul>

And here's the resulting nested list:


Related Articles

  1. How to Properly Nest Lists in HTML (this article)
  2. How to Open HTML Files in Google Chrome from Visual Studio Code
  3. How to Create a Simple HTML Document
  4. How to Work with Empty and Container Tags in HTML
  5. How to Mark Up a Citation in HTML
  6. How to Create an HTML Table
  7. How to Force a Refresh of favicon.ico