<li> must be nested

ZMD006

List item elements (<li>) must be contained within a parent <ul>, <ol>, or <menu> to preserve semantic list structure.

✅ Good

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>

❌ Bad

<li>First item</li>
<li>Second item</li>

When: A list item appears outside a <ul>, <ol>, or <menu>

Warning: <li> must be inside a <ul> or <ol>

Solution: Wrap <li> elements in a <ul> or <ol>

Why it matters

Accessibility: Mis-nested <li> elements break screen-reader list navigation and disrupt the document’s outline.

SEO: Structured lists help search engines parse content hierarchy and can improve featured snippet eligibility.

In brief

  • Goal: Ensure each list item is part of a valid list construct.
  • What to do: Wrap <li> elements inside <ul>, <ol>, or <menu> containers.
  • Why: Standalone <li> tags break the content outline and confuse screen readers and styling rules.

Intent

Prevent orphaned list items by enforcing proper HTML list nesting, improving accessibility and maintainability.

Benefits

  • Accessibility: Screen readers announce list items with correct nesting, preserving context and order.
  • Styling: Browsers apply default list styles only when <li> elements are nested correctly.
  • UX: Nested lists intuitively represent hierarchical data, aiding comprehension for all users.
  • SEO: Correct list markup helps search engines understand content grouping and importance.

Techniques

  • H48: Using <ol>, <ul> and <dl> for lists or groups of links to ensure proper list semantics.
  • ARIA list: For custom structures, use role="list" and role="listitem" to mimic native list behavior.

HTML Semantics

Each <li> represents an item of its parent list. Outside a valid container, it has no defined list context and should be corrected to maintain the document outline.

References

Tips & edge cases

  • Run automated accessibility audits (axe, pa11y) to catch orphaned <li> elements early.
  • Use nested lists sparingly to avoid overly complex structures—keep depth minimal for readability.
  • When building custom list UIs, prefer native <ul>/<ol> over role-based lists unless absolutely necessary.

See also