Can you nest lists in HTML? How?
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.
- 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
- 1
I 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?
- 2
Imagine 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?
- 1
We are building a multi-level sidebar navigation menu where the data comes from a JSON API as a nested tree structure. How would you write a component or function to dynamically render this data into semantically correct nested HTML lists?
- 2
You're debugging a legacy CSS codebase where nested lists are inheriting margins and list-style types in a weird way, causing the third-level nested items to overflow the container. How would you isolate the styles of nested lists using modern CSS selectors or custom properties?
- 1
We have a massive, deeply nested category tree (thousands of items) that we need to render for an e-commerce catalog. How would you design this component to ensure it remains highly performant, accessible to screen readers, and keyboard-navigable?
- 2
During an accessibility audit, a client points out that their screen reader users are getting lost in our nested sitemap list. How would you audit the HTML structure, and what ARIA attributes or semantic adjustments would you introduce to improve the screen reader experience?
- 1
We are designing a core 'Tree' component for our enterprise design system that needs to support nested lists, drag-and-drop reordering, and virtualized rendering for huge datasets. What architectural decisions would you make regarding the underlying HTML semantics versus performance optimizations like virtualization?
- 2
Our legacy application renders nested lists using a heavy, non-semantic div-soup library, and we need to migrate to semantic HTML lists to meet strict compliance standards. How would you design a migration strategy that ensures zero visual regression while updating the DOM structure across dozens of micro-frontends?
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?