How to Properly Nest Lists in HTML

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: