How to Properly Nest Lists in HTML

See HTML: Tips and Tricks for similar articles.

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. HTML Heading Levels and Sectioning Content
  2. How to Ask Good Technical Questions
  3. How to Properly Nest Lists in HTML (this article)
  4. How to Install and Use Visual Studio Code for Class
  5. How to Open HTML Files in Your Browser from Visual Studio Code
  6. How to Create a Simple HTML Document
  7. How to Work with Empty and Container Tags in HTML
  8. How to Mark Up a Citation in HTML
  9. How to Create an HTML Table
  10. How to Force a Refresh of favicon.ico