<li> elements must be contained in a <ul>, <ol>, or <menu>.

An <li> element is only recognized as a list item when it appears inside a proper list container: <ul>, <ol>, or <menu>. When an <li> is placed outside one of these parent elements, browsers and assistive technologies cannot determine that it belongs to a list. This breaks the semantic relationship between the list and its items.

Screen readers rely on this parent-child structure to announce lists correctly. When the structure is intact, a screen reader will say something like "list, 4 items" when entering the list, and users can navigate between items using keyboard shortcuts specific to lists. Without the containing element, none of this works. The <li> elements are treated as generic content, and screen reader users lose the ability to understand how the content is organized or to skip through it efficiently.

This rule maps to WCAG 2 Success Criterion 1.3.1 (Info and Relationships), which requires that information and relationships conveyed through visual presentation are also available programmatically. A group of items that looks like a list on screen must also be marked up as a list in the HTML so that assistive technologies can convey the same structure.

How to fix it

Wrap any orphaned <li> elements in the appropriate list container:

• Use <ul> for unordered lists where item order does not matter.
• Use <ol> for ordered lists where sequence or ranking matters.
• Use <menu> for interactive menu items (though <ul> is more widely supported and generally preferred).

If the <li> elements were not intended to be list items at all, replace them with a more appropriate element such as <div>, <p>, or <span>.

A common cause of this issue is nesting <li> elements directly inside a <div> or <nav> without an intervening <ul> or <ol>. Another cause is accidentally closing the list container too early, leaving subsequent <li> elements orphaned.

Examples

Incorrect: <li> elements without a list parent

<div>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</div>

The <li> elements are children of a <div>, which is not a valid list container. Screen readers will not announce these as list items.

Incorrect: list container closed too early

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
  </ul>
  <li>Contact</li>
</nav>

The third <li> sits outside the <ul> because the closing </ul> tag comes before it. It will not be recognized as part of the list.

Correct: <li> elements inside a <ul>

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Correct: <li> elements inside an <ol>

<ol>
  <li>Preheat the oven.</li>
  <li>Mix the ingredients.</li>
  <li>Bake for 30 minutes.</li>
</ol>

Correct: navigation with all items inside the list

<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

All <li> elements are contained within the <ul>, so screen readers will announce the full list and allow users to navigate between items.

Learn more:

W3C Reference

Understanding WCAG 2.1: Info and Relationships

→

MDN Reference

HTML li element

→