How to create a nested list in HTML

What is a nested list?

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.

Nested unordered list

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.

Explanation

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.

Nested ordered list

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.

Explanation

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.