Documentation/<li> must be nested

<li> must be nested

ZMD006

ZemDomu reports an <li> whose analyzed parent is not a <ul>, <ol>, or <menu>. Wrap related list items in the semantic list element that matches their meaning.

What this rule catches

  • Static <li> elements placed outside supported unordered, ordered, or menu list parents.
  • List-item markup whose immediate analyzed structure does not provide a valid list container.

What static analysis cannot prove

  • Static analysis cannot decide whether the content should be a list in the first place.
  • Markup reparented by runtime libraries or generated only after rendering may require DOM inspection.

Standards classification and detection confidence

Classification
normative — The rule checks the HTML list-item content model and the programmatic list relationship it creates.
Detection confidence
high — A resolved li parent is a direct source-structure check. Custom rendering or generated markup still needs a rendered-DOM review.

Applicable WCAG 2.2 criteria

Criterion 1.3.1 applies when list relationships conveyed visually must be available programmatically.

Normative means the rule checks a machine-testable part of a cited standards requirement. Advisory means it enforces a documented authoring convention or supporting technique. Neither classification makes a ZemDomu result proof of WCAG conformance.

Examples

✅ Good

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

❌ Bad

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

Quick summary

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.

Rule details

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

Related guides

Last verified: