Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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.
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>)
When Not to Use
Basic Usage
In Unordered List
Unordered list items
<ul> <li>Simple text item</li> <li>Another text item</li> <li>Third text item</li></ul>In Ordered List
Ordered list items
<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.
Multiple elements in list items
<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>Nesting Lists
List items can contain nested lists to create hierarchical structures. The nested list must be inside the <li> element.
Nested lists
<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
<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.
Value attribute on list items
<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
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 (li + li) |
margin-block-start |
var(--size-xs) |
In .inline / .unstyled lists |
margin-block-start |
0 |
In [data-layout="grid"] |
margin-block-start |
0 |
Attributes
| Attribute | Context | Description |
|---|---|---|
value |
Inside <ol> only |
Override the item's ordinal number |