← 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
Syntax
markup 
<ol type="1" start="number">
  <li>Item</li>
  <li>Item</li>
</ol>

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.
  • Accepted attributes:
  • type — 1 | a | A | i | I
  • start — integer
  • reversed — boolean
  • li value — integer
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.
  • Accepted values:
  • 1 — decimal (default)
  • a — lowercase letters
  • A — uppercase letters
  • i — lowercase Roman numerals
  • I — uppercase Roman numerals
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.
  • Accepted values:
  • start — integer, may be zero or negative
  • Applies to ol only
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.
  • Accepted values:
  • reversed — boolean attribute
  • Counts from the item count down to 1 (or start)
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.
  • Accepted values:
  • value — integer on li within ol
  • Following items continue from that 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>
Live Example
Related Topics

HTML Unordered Lists · HTML Other Lists / Description Lists · HTML Lists · HTML Table Colgroup

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
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.