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.

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:

Related Training

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