<ol>, <ul>, and <li>
The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 1 | |
| HTML attribute | ||||||
value | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
reversed | 18 | 79 | 18 | 6 | 18 | 6 |
start | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
type | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| DOM API | ||||||
| The HTMLLIElement interface exposes specific properties and methods (beyond those defined by regular HTMLElement interface it also has available to it by inheritance) for manipulating list elements. | 1 | 12 | 1 | 1 | 18 | 1 |
| The value property of the HTMLLIElement interface indicates the ordinal position of the list element inside a given ol. It can be smaller than 0. If the li element is not a child of an ol element, the property has no meaning. | 1 | 12 | 1 | 1 | 18 | 1 |
| The HTMLOListElement interface provides special properties (beyond those defined on the regular HTMLElement interface it also has available to it by inheritance) for manipulating ordered list elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| The reversed property of the HTMLOListElement interface indicates order of a list. | 18 | 79 | 18 | 6 | 18 | 6 |
| The start property of the HTMLOListElement interface indicates starting value of the ordered list, with default value of 1. | 1 | 12 | 1 | 3 | 18 | 1 |
| The type property of the HTMLOListElement interface indicates the kind of marker to be used to display ordered list. | 1 | 12 | 1 | 3 | 18 | 1 |
| The HTMLUListElement interface provides special properties (beyond those defined on the regular HTMLElement interface it also has available to it by inheritance) for manipulating unordered list (ul) elements. | 1 | 12 | 1 | 3 | 18 | 1 |
| Other | ||||||
| The HTML element represents an ordered list of items — typically rendered as a numbered list. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
| The HTML element represents an unordered list of items, typically rendered as a bulleted list. | 1 | 12 | 1 | ≤4 | 18 | ≤3.2 |
- Before Firefox 10, Gecko incorrectly reflected negative value attributes to 0.
Syntax
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>Live demo
Use cases
-
Feature and task lists
Represent grouped bullets, numbered steps, or checklists with native semantics.
-
Repeated navigation items
Use lists for menus, sidebars, and grouped links that share the same structure.
Cautions
- Do not simulate lists with line breaks or punctuation when the items are truly related as a group.
- Choose ordered versus unordered lists based on meaning, not just visual preference.
Accessibility
- Native lists announce item counts and structure automatically, which improves navigation and comprehension.