A nested list is simply a list inside another list. The proper way to create a nested list is to realize that the nested list is a child of a list item, not a list. A nested list can be ordered or unordered.
To create an unordered list in HTML, use the ul (unordered list) tag with the li (list item) tag in a hierarchical structure. In the example below, the list represents vegetable categories with a nested list showing the vegetable names of a particular category.
Lines 3–20: The outer ul represents the main list and each li displays different vegetable categories.
Lines 7–10 and lines 15–18: To create a nested unordered list, use another ul tag inside the li tag. The nested ul represents an unordered list, and the inner li tag displays vegetables of each category.
To create an ordered list in HTML, use the ol (ordered list) tag with the li (list item) tag in a hierarchical structure. In the example below, an ordered list represents the course curriculum with a nested list showing the subtopics of each course.
Lines 3–31: The outer ol represents the main list and each li displays different courses.
Lines 7–11, lines 16–20, and lines 25–29: To create a nested ordered list, use another ol tag inside the li tag. The nested ol represents an ordered list, and the inner li tag displays the subtopics of each course.
Free Resources