• Post category:HTML

How to Create List Within a List HTML | Step by Step Guide

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:

list within a list html

Steps :

  1. In the above code, we have created <ol> ordered list within that we created three <li> tags namely Foods, Vehicles, and Dresses.
  2. 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.
  3. 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.
  4. See the output, the nested list is displayed successfully.

Leave a Reply