<ol>, <ul>, and <li>
List elements such as <ul>, <ol>, and <li> represent grouped items with an explicit relationship. They are clearer and more flexible than manual separators or repeated generic divs.
Overview
List elements such as <ul>, <ol>, and <li> represent grouped items with an explicit relationship. They are clearer and more flexible than manual separators or repeated generic divs.
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.
Related links
Powered by web-features