noMisplacedListElements (HTML)

Summary

Rule available since: v2.5.15
Diagnostic Category: lint/nursery/noMisplacedListElements
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from @html-eslint/require-li-container

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noMisplacedListElements": "error"
6
      }
7
    }
8
  }
9
}

Description

Require <li> elements with an HTML element parent to be children of <ul>, <ol>, or <menu>.

List items need a list container to define their relationship to the other items. Placing a list item outside a list container produces invalid HTML.

The parent is the element the item is rendered into. List items that aren’t inside any element in the file are ignored, because the file may be rendered inside a list somewhere else, for example as a component. Items directly inside a <template> element are also ignored, because the template’s content is inserted by a script, not rendered in place. Items whose parent is a component are also ignored, because the element a component renders is unknown.

In Svelte, control blocks such as {#if} and {#each}, as well as <svelte:boundary>, <svelte:fragment>, and <slot>, are skipped when finding the parent, while items inside snippets, <svelte:element>, and other Svelte special elements are ignored.

In Vue, <template> elements with a v-if, v-else-if, v-else, or v-for directive, <transition>, <keep-alive>, <suspense>, and <slot> are looked through to find the parent. Items directly inside the component’s top-level <template>, and items inside <component>, <transition-group>, or <teleport>, are ignored.

In Astro, fragments and <slot> are looked through to find the parent. Markup inside a {...} expression is checked separately from the markup around it, so an item in an expression is only compared with elements in the same expression. For example, <div>{items.map((item) => <li>{item}</li>)}</div> isn’t reported, because the <div> is outside the expression.

Examples

Invalid

1
<div><li>Item</li></div>

code-block.html:1:6 lint/nursery/noMisplacedListElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <li> element is outside a list container.
  
  > 1 │ <div><li>Item</li></div>
      │      ^^^^
    2 │ 
  
  ℹ List items need a list container to form a valid HTML list.
  
  ℹ Make this element a direct child of <ul>, <ol>, or <menu>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<ul><div><li>Item</li></div></ul>

code-block.html:1:10 lint/nursery/noMisplacedListElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <li> element is outside a list container.
  
  > 1 │ <ul><div><li>Item</li></div></ul>
      │          ^^^^
    2 │ 
  
  ℹ List items need a list container to form a valid HTML list.
  
  ℹ Make this element a direct child of <ul>, <ol>, or <menu>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<div>
2
    {#each items as item}
3
        <li>{item}</li>
4
    {/each}
5
</div>

code-block.svelte:3:9 lint/nursery/noMisplacedListElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <li> element is outside a list container.
  
    1 │ <div>
    2 │     {#each items as item}
  > 3 │         <li>{item}</li>
      │         ^^^^
    4 │     {/each}
    5 │ </div>
  
  ℹ List items need a list container to form a valid HTML list.
  
  ℹ Make this element a direct child of <ul>, <ol>, or <menu>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
<div>
2
    <>
3
        <li>Item</li>
4
    </>
5
</div>

code-block.astro:3:9 lint/nursery/noMisplacedListElements ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This <li> element is outside a list container.
  
    1 │ <div>
    2 │     <>
  > 3 │         <li>Item</li>
      │         ^^^^
    4 │     </>
    5 │ </div>
  
  ℹ List items need a list container to form a valid HTML list.
  
  ℹ Make this element a direct child of <ul>, <ol>, or <menu>.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<ul><li>Item</li></ul>
2
<ol><li>Item</li></ol>
3
<menu><li>Item</li></menu>

1
<template>
2
    <li>Item rendered in a list elsewhere</li>
3
</template>

1
{#snippet item()}
2
    <li>Item</li>
3
{/snippet}

1
<ul>
2
    <>
3
        <li>Item</li>
4
    </>
5
</ul>