← Back to HTML Course | Chapter 2: Text, Formatting & Media | Lesson 25 of 26

HTML Ordered Lists

An ordered list is for a group of items where sequence genuinely matters -- step-by-step instructions, a ranking, a numbered legal clause list -- and each item is automatically numbered by the browser, so readers understand there is a specific order to follow, unlike the bullet points of an unordered list.

In this page:

  1. Creating a Basic Ordered List
  2. Choosing a Numbering Style with type
  3. Starting from a Custom Number with start
  4. Counting Down with reversed
  5. Overriding a Single Item Number with value

Creating a Basic Ordered List

<ol> works exactly like <ul> structurally -- items are still wrapped in <li> -- but the browser automatically numbers each item 1, 2, 3, and so on, which is ideal for content where the sequence itself carries meaning, like a recipe's steps.

Note: Never manually type numbers into ordered list items; let the browser generate them so reordering items stays effortless.

Warning: Mixing manual numbers into li text alongside the browser's automatic numbering produces confusing double-numbered items.

Example: Creating a Basic Ordered List

markup 
<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
</ol>

Choosing a Numbering Style with type

The type attribute changes the marker style from plain numbers to uppercase letters (A), lowercase letters (a), uppercase roman numerals (I), or lowercase roman numerals (i), which is commonly used for formal or legal-style multi-level outlines.

Note: Combine different type values across nested ordered lists to build a classic formal outline (I, A, 1, a) structure.

Warning: The type attribute changes only the visual marker style; the underlying sequence and count are unaffected.

Example: Choosing a Numbering Style with type

markup 
<ol type="I">
  <li>First section</li>
  <li>Second section</li>
</ol>

Starting from a Custom Number with start

The start attribute sets the number the list begins counting from instead of the default 1, which is useful when continuing a numbered sequence that was interrupted by other content, like a paragraph of explanation between step 3 and step 4.

Note: Use start to resume a numbered sequence after inserting explanatory content between two separate ol blocks.

Warning: start always expects a plain number, even when type is set to letters or roman numerals -- start="3" with type="A" begins at "C", not the literal character 3.

Example: Starting from a Custom Number with start

markup 
<ol start="4">
  <li>Step four</li>
  <li>Step five</li>
</ol>

Counting Down with reversed

The reversed attribute makes the browser count down instead of up, showing the highest number first and counting down to 1, which is a natural fit for countdowns, top-10 style rankings presented from lowest to highest importance, or leaderboard displays.

Note: Combine reversed with start to control both the counting direction and the exact number the countdown begins at.

Warning: reversed alone (without start) counts down from a number equal to the total item count, which can surprise you if items are later added or removed.

Example: Counting Down with reversed

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

Overriding a Single Item Number with value

The value attribute on an individual <li> inside an <ol> overrides just that item's number, and every subsequent item continues counting up (or down, if reversed) from that new value, which is useful for skipping a removed step without renumbering the whole list by hand.

Note: Use value on a single li to jump the sequence forward when a step was intentionally removed, rather than manually retyping every following number.

Warning: value on an li only affects that specific item and everything after it; earlier items in the list remain unaffected.

Example: Overriding a Single Item Number with value

markup 
<ol>
  <li>Step one</li>
  <li value="5">Step five</li>
  <li>Step six</li>
</ol>
Common Mistakes
  1. Manually typing numbers inside each <li> instead of letting the browser generate them automatically via <ol>, which breaks if items are ever reordered.
  2. Forgetting that the start attribute is a number, not a letter, even when type is set to a letter or roman numeral style.
  3. Using reversed without realizing it also requires start (or relies on the item count) to know exactly where the countdown should begin.
Chapter Summary
  • <ol> automatically numbers its <li> items in order, unlike <ul> which uses bullets.
  • The type attribute switches the numbering style (1, A, a, I, i), and start sets the first number in the sequence.
  • The reversed attribute counts the list down instead of up, and value on an individual li can override its specific number.
Browser Support

<ol> and all its attributes (type, start, reversed) are supported in every modern browser.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Unordered Lists Next Lesson → HTML Other Lists / Description Lists

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.