Ordered Lists

An ordered list is created with the <ol> tag, with each item in an <li> tag. By default items are numbered 1, 2, 3… Use ordered lists when the sequence matters, such as step-by-step instructions.

Customising Ordered Lists

The type attribute changes the numbering style: 1 (numbers, default), A (uppercase letters), a (lowercase letters), I (uppercase Roman numerals), i (lowercase Roman numerals). The start attribute sets the starting number. The reversed boolean attribute counts downward. The CSS list-style-type property is the modern CSS equivalent of the type attribute.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ordered Lists</title>
</head>
<body>
  <h1>Recipe Steps</h1>
  <ol>
    <li>Preheat the oven to 180°C.</li>
    <li>Mix the dry ingredients.</li>
    <li>Add wet ingredients and stir.</li>
    <li>Pour into a greased tin.</li>
    <li>Bake for 25 minutes.</li>
  </ol>

  <h2>Alphabetical</h2>
  <ol type="A">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
  </ol>

  <h2>Start from 5</h2>
  <ol start="5">
    <li>Item five</li>
    <li>Item six</li>
  </ol>

  <h2>Reversed countdown</h2>
  <ol reversed>
    <li>Ready</li>
    <li>Set</li>
    <li>Go!</li>
  </ol>
</body>
</html>

HTML

Full Editor

Pro Tip

Use the start attribute when an ordered list continues from a previous list that was interrupted by other content — this keeps the numbering logical and unambiguous for the reader.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned