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:

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

• Web Development HTML

Courses

• Introduction to HTML Training see Class Schedule

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