HTML Ordered Lists

Use <ol> when the order of items is meaningful, such as steps, rankings or instructions. Each item is placed in an <li> element.

Basic ordered list Top ↑

<ol>
  <li>Install the software</li>
  <li>Open the project</li>
  <li>Run the test</li>
</ol>

1. Install the software
2. Open the project
3. Run the test

Start numbering at another value Top ↑

The start attribute takes an integer, even if the visible numbering uses letters or Roman numerals.

<ol start="4"> ... </ol>

4. Fourth item
5. Fifth item
6. Sixth item

Reverse the numbering Top ↑

<ol reversed> ... </ol>

1. Bronze
2. Silver
3. Gold

Numbering type Top ↑

The HTML type attribute supports 1, A, a, I and i. When the marker style is only presentational, CSS list-style-type is usually the better choice.

<ol type="I"> ... </ol>

Set the value of one list item Top ↑

<ol>
  <li>One</li>
  <li value="5">Five</li>
  <li>Six</li>
</ol>

Style ordered-list markers with CSS Top ↑

ol { list-style-type: upper-roman; }

Open styled-list demo →

Related tutorials Top ↑

HTML Lists · Unordered Lists · Description Lists

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: