In HTML, which elements are allowed as direct children of <ul> and <ol>, and where must a nested sublist be placed?

## The content model, stated exactly The HTML specification gives `<ul>` and `<ol>` an unusually narrow content model: zero or more `<li>` elements, optionally intermixed with the *script-supporting elements* `<script>` and `<template>`. That is the complete list of legal direct children. A `<div>`, a `<p>`, a bare `<a>`, or a visible text node directly inside `<ul>` is a conformance error. Inter-element whitespace (the newlines and indentation between tags) is fine and is not counted as content. `<li>` is the opposite: its content model is *flow content*, meaning practically anything — paragraphs, headings, images, buttons, form controls, and another list. So the rule is easy to remember as "the list is strict about its children; the item is permissive about its own". ```html <!-- invalid: div is not allowed as a child of ul --> <ul> <div class="row"><a href="/a">A</a></div> </ul> <!-- valid: the wrapper lives inside the item --> <ul> <li><div class="row"><a href="/a">A</a></div></li> </ul> ``` ## "But it renders fine" is not a defence Browsers are famously forgiving, and a `<div>` written directly inside `<ul>` will still appear on screen. The HTML parser does not move it or drop it — it simply becomes a child element of the list in the DOM. What you lose is not pixels, it is meaning: the list's accessibility semantics rest on the assumption that its children are list items, so an interloper can disrupt how the list and its item count are exposed, and it makes the markup fail validation. Since the fix costs one extra element, there is no reason to argue the point in an interview. ## Why nesting position matters so much A nested list is the case people get wrong most often, because both versions look identical once styled: ```html <!-- wrong: the sublist is a sibling of the items, not part of one --> <ul> <li>Products</li> <ul> <li>Phones</li> </ul> </ul> <!-- right: the sublist is inside the item it belongs to --> <ul> <li>Products <ul> <li>Phones</li> </ul> </li> </ul> ``` In the wrong version the inner `<ul>` is not associated with "Products" at all. A screen reader encounters two lists at the same level, so the relationship a sighted user reads from the indentation — these phones belong under Products — is simply absent for someone listening. In the right version the inner list is a descendant of the item, and assistive technology can report nesting level along with position, e.g. entering a level-two list of one item. A useful detail: the `</li>` end tag is optional. An `<li>` is closed implicitly by the next `<li>` or by the parent's end tag, which means `<li>Products <ul>…</ul>` still places the sublist inside the item — the item has not ended yet. Omitting end tags is legal but makes the structure harder to read, so most teams close items explicitly. ## What correct list markup actually buys `<ul>` and `<ol>` carry the implicit ARIA role `list`, and `<li>` carries `listitem`. From that, screen readers derive an announcement along the lines of "list, five items" on entry, a position for each item as you move through it, and the nesting level for sublists. None of that exists for a stack of links in a `<div>`: the user gets no count, no sense of progress, and no boundary telling them the group has ended. It is the cheapest accessibility win in HTML, and it is free with the correct element. ## The bugs this rule prevents Three ship regularly. First, the `<div>` row wrapper added when someone needs a flex container per row — move it inside the `<li>`. Second, the sublist placed as a sibling of the items, usually produced by a template that emits children after the parent item's closing tag. Third, a template that renders a comment banner, a text node, or a framework-injected element straight into the list container. Whenever markup is generated in a loop, check the *generated* HTML rather than the template: the loop body is where the stray direct child appears.