Can you nest lists in HTML? How?

Difficulty: 3/10

HTML Semantics, DOM Structure, Accessibility (a11y)

Nesting Lists in HTML

Yes, you can nest lists in HTML. Nesting lists means placing one list (ordered <ol> or unordered <ul>) inside a list item (<li>) of another list. This is useful for creating hierarchical or multi-level structures such as outlines, menus, or step-by-step instructions.

Example: Nested Unordered List

Example: Nested Ordered List

Key Points About Nesting Lists

1
Always place the nested <ul> or <ol> inside an <li> element.
2
Browsers automatically indent nested lists for readability.
3
You can mix ordered and unordered lists (e.g., <ul> inside <ol>).
4
Too much nesting can make content harder to read.
5
Use CSS to control indentation and bullet/number styles.

Scenario Questions

0-2 years experience

1I have a candidate who wrote a navigation menu where they put a <ul> directly inside another <ul> as a sibling to <li> elements. The browser seems to render it okay, but why is this technically invalid, and how would you refactor it to be semantically correct?
2Imagine you're building a simple recipe page with nested steps (e.g., Step 1 has sub-steps A and B). How would you write the HTML structure to ensure that screen readers read the sub-steps as part of the main step rather than a separate list?

Follow-up Questions

How does a screen reader announce a nested list compared to an incorrectly nested one?
If you had to build a collapsible file explorer, how would you manage the state of expanded/collapsed nested lists?
How would you style nested list markers using CSS custom properties without breaking the default semantic hierarchy?