List Within a list HTML
In this article, we will see what is listed within a list HTML. One list inside another list means a Nested list. You can also create an unordered nested list and an ordered nested list.
Example code
<!DOCTYPE html>
<html>
<head>
<title>HTML DEMO</title>
</head>
<body>
<ol type="I">
<li>Foods
<ol type="1">
<li>Apples</li>
<li>Orange</li>
<li>Banana</li>
</ol></li>
<li>Vehicles
<ol type="1">
<li>Car</li>
<li>Bike</li>
<li>Bus</li>
</ol></li>
<li>Dresses
<ol type="1">
<li>Pant</li>
<li>Shirt</li>
<li>suit</li>
</ol></li>
</ol>
</body>
</html>Output:
Steps :
- In the above code, we have created <ol> ordered list within that we created three <li> tags namely Foods, Vehicles, and Dresses.
- We have created a <ol> tag inside each <li> tag. In the food list, we have placed apples, bananas, and oranges in a separate <li> tag.
- In the Vehicles list, we have placed car, bike, and bus in a separate <li> tag. In the Dresses list, we have placed pant, shirt, and suits in a separate <li> tag.
- See the output, the nested list is displayed successfully.
