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.
- Start by creating a list. It can be ordered or unordered:
<ul> <li>Fruit</li> <li>Vegetables</li> <li>Meat</li> </ul>
- 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. - 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
- HTML Heading Levels and Sectioning Content
- How to Ask Good Technical Questions
- How to Properly Nest Lists in HTML (this article)
- How to Install and Use Visual Studio Code for Class
- How to Open HTML Files in Your Browser from Visual Studio Code
- How to Create a Simple HTML Document
- How to Work with Empty and Container Tags in HTML
- How to Mark Up a Citation in HTML
- How to Create an HTML Table
- How to Force a Refresh of favicon.ico