li

The list item element represents an individual item within a list structure.

Description

The <li> element represents a single item in a list. It must be a direct child of an <ul> (unordered list), <ol> (ordered list), or <menu> element.

List items can contain any flow content, including text, links, images, and nested lists.

Semantic Meaning

A list item conveys that:

  • The content is one piece of a larger collection
  • It is related to its sibling items
  • In ordered lists, it has a specific position in a sequence
  • In unordered lists, it is one of several equal items

Screen readers announce "list item" along with the item's position (e.g., "1 of 5") to help users navigate list content.

When to Use

  • As a direct child of <ul>, <ol>, or <menu>
  • To wrap individual items in any list structure
  • For navigation menu items (inside <nav> with <ul>)
  • For any grouped content that belongs in a list

When Not to Use

  • Outside of a list container - browsers may render it, but it's invalid HTML
  • For definition list content - use <dt> and <dd>
  • When items need no list semantics - use <div> or <span>

Basic Usage

In Unordered List

  • Simple text item
  • Another text item
  • Third text item
<ul> <li>Simple text item</li> <li>Another text item</li> <li>Third text item</li> </ul>

In Ordered List

  1. First step
  2. Second step
  3. Third step
<ol> <li>First step</li> <li>Second step</li> <li>Third step</li> </ol>

Rich Content

List items can contain any flow content, not just text.

Links

Multiple Elements

  • Feature Name

    Description of the feature with supporting text.

  • Another Feature

    More descriptive text about this feature.

<ul> <li> <strong>Feature Name</strong> <p>Description of the feature with supporting text.</p> </li> <li> <strong>Another Feature</strong> <p>More descriptive text about this feature.</p> </li> </ul>

Images

  • Placeholder image
  • Placeholder image

Nesting Lists

List items can contain nested lists to create hierarchical structures. The nested list must be inside the <li> element.

  • Parent item one
    • Child item one
    • Child item two
      • Grandchild item
  • Parent item two
<ul> <li>Parent item one <ul> <li>Child item one</li> <li>Child item two <ul> <li>Grandchild item</li> </ul> </li> </ul> </li> <li>Parent item two</li> </ul>

Mixed List Types

You can nest different list types within each other.

  1. Step one: gather materials
    • Paper
    • Scissors
    • Glue
  2. Step two: cut the paper
  3. Step three: assemble
<ol> <li>Step one: gather materials <ul> <li>Paper</li> <li>Scissors</li> <li>Glue</li> </ul> </li> <li>Step two: cut the paper</li> <li>Step three: assemble</li> </ol>

Value Attribute (Ordered Lists)

In ordered lists, use the value attribute to override the item's number. Subsequent items continue from that value.

  1. Regular item (1)
  2. Jumps to 10
  3. Continues at 11
  4. Jumps to 20
  5. Continues at 21
<ol> <li>Regular item (1)</li> <li value="10">Jumps to 10</li> <li>Continues at 11</li> <li value="20">Jumps to 20</li> <li>Continues at 21</li> </ol>

Note: The value attribute only applies to <li> elements within <ol>. It has no effect in <ul>.

Accessibility

Screen Reader Behavior

  • Announced as "list item" with position (e.g., "bullet, list item 2 of 5")
  • In ordered lists, the number is announced
  • Nested list items announce their depth level
  • Users can navigate between items with keyboard shortcuts

Best Practices

  • Always place <li> inside a proper list container
  • Keep list items focused on single concepts
  • Use meaningful content - avoid empty list items
  • Limit nesting depth to 3 levels for usability
  • For complex content, consider headings within items

Common Mistakes

  • Wrong: Using <li> outside a list container
  • Wrong: Placing block elements directly between <ul>/<ol> and <li>
  • Wrong: Empty list items for spacing

CSS Properties

Context Property Value
Adjacent items margin-block-start var(--size-xs)
In .inline lists margin-block-start 0
In .unstyled lists margin-block-start 0

The li + li selector adds vertical spacing between consecutive items, creating comfortable reading rhythm.

Attributes

Attribute Context Description
value Inside <ol> only Override the item's ordinal number

Related Elements

  • <ul> - Unordered list container
  • <ol> - Ordered list container
  • <dl> - Definition list (uses <dt>/<dd> instead)
  • <nav> - Navigation container for menu lists