HTML ORDERED LISTS | ORDERED LIST IN HTML | HTML OL TAG

An HTML ordered list is used to display items in a numbered sequence. It is created with the <ol> (ordered list) tag, and each item is placed inside an <li> (list item) tag.

Basic Syntax

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ol>

Output:

1. Apple
2. Banana
3. Orange

Different Types of Ordered Lists

1. Numbers (Default)

<ol type="1">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

2. Uppercase Letters

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Output:
A. HTML
B. CSS
C. JavaScript

3. Lowercase Letters

<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

4. Uppercase Roman Numerals

<ol type="I">
  <li>Chapter One</li>
  <li>Chapter Two</li>
  <li>Chapter Three</li>
</ol>

5. Lowercase Roman Numerals

<ol type="i">
  <li>Chapter One</li>
  <li>Chapter Two</li>
  <li>Chapter Three</li>
</ol>

Start Number

Use the start attribute to begin numbering from a different value.

<ol start="5">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Output:
5. HTML
6. CSS
7. JavaScript

Reversed Ordered List

Use the reversed attribute to count backward.

<ol reversed>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Output:
3. First
2. Second

1. Third

Summary

• <ol>: Defines an ordered (numbered) list.
• <li>: Defines each list item.
• type: Changes the numbering style (1, A, a, I, i).
• start: Sets the starting number.
• reversed: Displays the list in descending order.