<ol>
The <ol> element represents an ordered list of items, typically rendered as a numbered list. It is used when the sequence or order of items is meaningful, such as step-by-step instructions, rankings, or any content where position matters.
This page was last updated on 2025-11-27
Syntax
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
Attributes
- type - Specifies the numbering type: "1" (numbers), "a" (lowercase letters), "A" (uppercase letters), "i" (lowercase Roman), "I" (uppercase Roman)
- start - Specifies the starting number for the list (integer value)
- reversed - Specifies that the list should be numbered in descending order (HTML5)
- class - CSS class name for styling
- id - Unique identifier for the element
- style - Inline CSS styles
- title - Advisory information (tooltip)
Examples
Basic ordered list:
<ol>
<li>Preheat the oven to 350°F</li>
<li>Mix the dry ingredients</li>
<li>Add wet ingredients</li>
<li>Bake for 25 minutes</li>
</ol>
Ordered list with custom start and type:
<ol type="A" start="3">
<li>This will be labeled C</li>
<li>This will be labeled D</li>
<li>This will be labeled E</li>
</ol>
Reversed countdown list:
<ol reversed>
<li>Third place: Bronze medal</li>
<li>Second place: Silver medal</li>
<li>First place: Gold medal</li>
</ol>
When to Use
Use the <ol> element when the order of items conveys important information. Common use cases include recipes, tutorials, step-by-step instructions, rankings, legal documents with numbered clauses, and any sequential process. If the order does not matter, use <ul> instead.
The numbering is automatically generated by the browser and updates when items are added or removed. You can customize the numbering style using the type attribute or CSS list-style-type property. The start attribute allows lists to begin from any number, useful when splitting a list across multiple sections.
