**`<li>`** only makes sense nested directly inside a list container (`<ul>`, `<ol>`, or `<menu>`) — it's not a standalone element. Inside an `<ol>`, an `<li>` can take a **`value`** attribute to explicitly set (or reset) its number, which also shifts the numbering of any following items that don't specify their own value.

1Understanding <li>

`<li>` only makes sense nested directly inside a list container (<ul>, <ol>, or <menu>) — it's not a standalone element. Inside an <ol>, an <li> can take a `value` attribute to explicitly set (or reset) its number, which also shifts the numbering of any following items that don't specify their own value.

💡

An <li> can contain block-level content — paragraphs, nested lists, images — not just plain text; it's a full container, not just an inline label.

editor.html

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

localhost:3000

2Practical Example

Here is a real-world application of <li> showing how it is used in production HTML.

editor.html

<!-- Overriding a specific item's number -->
<ol>
  <li>First</li>
  <li value="10">Jumps to 10</li>
  <li>Continues as 11</li>
</ol>

localhost:3000

3Best Practices

Follow these guidelines when working with <li>:

1. Only use <li> as a direct child of <ul>, <ol>, or <menu>

2. Nest a full <ul>/<ol> inside an <li> to represent sub-items, rather than faking indentation

3. Use the value attribute on an <li> inside an <ol> when you need to jump the numbering

⚠️

Tip: An <li> can contain block-level content — paragraphs, nested lists, images — not just plain text; it's a full container, not just an inline label.

editor.html

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

localhost:3000

Examples

Example 01Basic Usage

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Example 02Advanced Example

<!-- Overriding a specific item's number -->
<ol>
  <li>First</li>
  <li value="10">Jumps to 10</li>
  <li>Continues as 11</li>
</ol>

Best Practices

Only use
as a direct child of

Interview Question

Can an <li> contain another full list, and what does that represent?▼

Hint: Think about how a multi-level outline or nested menu is structured in HTML.

Yes — nesting a <ul> or <ol> inside an <li> is the standard way to represent a sub-list belonging to that specific item, like a category with sub-items in a table of contents, or a multi-level navigation menu. The nested list becomes a child of that one <li>, semantically saying 'these sub-items belong under this parent item', which both browsers and screen readers render/announce with the correct indentation and nesting level.

Exercises

EasyPractice using <li> in a real scenario.

View Solution

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

Frequently Asked Questions

Can an <li> contain another full list, and what does that represent?▼

Yes — nesting a

is the standard way to represent a sub-list belonging to that specific item, like a category with sub-items in a table of contents, or a multi-level navigation menu. The nested list becomes a child of that one
, semantically saying 'these sub-items belong under this parent item', which both browsers and screen readers render/announce with the correct indentation and nesting level.

Related Functions

ul-tagol-tag