How to Properly Nest Lists in HTML

  • google plus

In Brief...

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.

Take our Introduction to HTML Training course for free.

See the Course Outline and Register

Instructions

  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:

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Nat Dunn

Nat Dunn founded Webucator in 2003 to combine his passion for web development with his business expertise and to help companies benefit from both.

Discuss