HTML Ordered Lists

An ordered list is a set of items that has a meaningful sequence — steps in a recipe, ranked results, or numbered instructions. In HTML, you build one with the <ol> (ordered list) element wrapping one or more <li> (list item) elements. The browser automatically numbers the items for you, so you never have to type the numbers yourself — which matters more than it sounds, because it means you can reorder, insert, or delete items without renumbering anything by hand.

Overview: How Ordered Lists Work

The <ol> element is a block-level container. Its only valid children are <li> elements (along with, in modern HTML, <script> and <template> tags, which are rarely used in a course context). Every direct child <li> becomes one numbered entry. The browser’s rendering engine does not literally insert the text “1.”, “2.”, “3.” into the DOM — instead, each <li> is rendered as a list item box, and the browser generates a marker (the number and the period) as part of its default list-item rendering, similar to how it generates bullets for unordered lists. This means the numbers are not selectable text and will not appear if you copy the list content into a search or a text field, and they are not present when you inspect the raw text nodes in the DOM — only the <li> elements and their content exist as nodes; the numbering is presentational output the browser adds.

Semantically, <ol> tells both the browser and assistive technology (like screen readers) that order matters. A screen reader will typically announce “list, 3 items” and read out “1 of 3”, “2 of 3”, and so on — information that a sighted user gets visually from the numbers. This is the key semantic difference from <ul> (unordered list): use <ol> whenever sequence, rank, or step order is part of the meaning, and <ul> when the items could be reshuffled without changing the meaning.

By default, browsers render an <ol> with some top and bottom margin, and each <li> is indented from the left edge to make room for its number. These default spacing and indentation rules come from the browser’s built-in stylesheet (the “user agent stylesheet”) — they are presentation, not structure, and can be changed with CSS. This course focuses on markup, so just know that visual styling like list appearance, spacing, or custom markers belongs to CSS, not to the HTML itself.

Syntax

<ol type="1" start="1" reversed>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Attribute	Applies to	Purpose
type	<ol>	Sets the numbering style: 1 (numbers, default), a (lowercase letters), A (uppercase letters), i (lowercase roman numerals), I (uppercase roman numerals).
start	<ol>	An integer specifying the counting value of the first item (e.g. start="5" begins at 5, or at “e” if type="a").
reversed	<ol>	A boolean attribute that counts the list down instead of up (e.g. 3, 2, 1).
value	<li>	Overrides the counter for that specific item and all items after it continue counting from that new value.

Examples

Example 1: A Basic Numbered List

<ol>
  <li>Preheat the oven to 200°C</li>
  <li>Mix the dry ingredients</li>
  <li>Fold in the wet ingredients</li>
  <li>Bake for 25 minutes</li>
</ol>

Result: The browser displays four lines, each indented and preceded by an automatically generated number: “1.” through “4.”, one per instruction, in the order they appear in the source.

This is the simplest and most common use of <ol>: sequential steps where order changes the meaning. Because the numbering is automatic, inserting a new step in the middle of the recipe just means adding a new <li> — every following number updates on its own.

Example 2: Custom Start and Type

<h3>Top 3 Finishers</h3>
<ol type="I" start="1">
  <li>Alex Rivera – Gold</li>
  <li>Priya Nair – Silver</li>
  <li>Jonas Weber – Bronze</li>
</ol>

Result: A heading “Top 3 Finishers” appears above a three-item list, but instead of “1. 2. 3.”, the markers render as uppercase roman numerals: “I.”, “II.”, “III.”.

The type="I" attribute changes only the visual marker style; the underlying meaning — an ordered sequence of three items — is unchanged. This is useful for rankings, formal outlines, or legal-style numbering.

Example 3: Reversed Countdown with a Nested List

<ol reversed>
  <li>Assemble ingredients
    <ol type="a">
      <li>flour</li>
      <li>sugar</li>
    </ol>
  </li>
  <li>Mix batter</li>
  <li>Bake</li>
</ol>

Result: The outer list counts down: “3. Assemble ingredients”, “2. Mix batter”, “1. Bake”. Nested inside the first item is a lettered sub-list rendering “a. flour” and “b. sugar”, indented further than the outer list.

This shows two important things at once: the reversed attribute flips the counting direction, and lists can be nested by placing a complete <ol> (or <ul>) inside an <li>. The nested list gets its own independent numbering and marker type, and it does not affect the outer list’s count.

How the Browser Builds This

When the HTML parser encounters <ol>, it creates an element node in the DOM tree and expects <li> children. Each <li> the parser meets becomes a child node of the <ol>; if you forget a closing </li>, the parser is forgiving and will auto-close the previous item as soon as a new <li> or the closing </ol> tag is seen, so a missing end tag rarely breaks the structure — though writing it explicitly is still best practice for clarity and validity.

Once the DOM tree exists, the rendering engine walks it to build the render tree. Each <li> is assigned display: list-item by the browser’s default stylesheet, which tells the layout engine to generate a marker box (the number) alongside the content box (your text). The engine maintains an internal counter for the list: it starts at 1 (or at the value of start), increments for each item (or decrements if reversed is present), and resets whenever a value attribute appears on an <li>. Nested <ol> elements get their own counter scope, which is why a sub-list can restart at 1 (or “a”) without disturbing the parent list’s numbering.

Common Mistakes

Mistake 1: Putting text directly inside <ol> without <li>

<ol>
  Step one
  Step two
</ol>

This is invalid — <ol> only accepts <li> (and a couple of rare exceptions) as direct children. Plain text is not a valid child, so no numbering is generated and the markup fails validation. Wrap each item:

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Mistake 2: Using <ol> purely for visual numbering on unordered content

<ol>
  <li>Blog</li>
  <li>Contact</li>
  <li>About</li>
</ol>

If these are navigation links with no inherent order (their sequence doesn’t carry meaning), an <ol> misleads assistive technology into announcing position information (“1 of 3”) that implies a ranking that isn’t real. Use <ul> for unordered content like this instead, and reserve <ol> for genuinely sequential data such as steps or rankings.

Mistake 3: Nesting a list directly inside <ol> instead of inside an <li>

<ol>
  <li>Main step</li>
  <ol>
    <li>Sub step</li>
  </ol>
</ol>

A nested <ol> or <ul> must live inside an <li>, not as a sibling of one, because <ol> only permits <li> children. The corrected version places the inner list inside the relevant item:

<ol>
  <li>Main step
    <ol>
      <li>Sub step</li>
    </ol>
  </li>
</ol>

Best Practices

• Use <ol> only when the sequence carries meaning — steps, rankings, or chronological order; otherwise use <ul>.
• Let the browser generate the numbers automatically instead of typing “1.”, “2.” as plain text inside each <li> — hand-typed numbers break when items are reordered or inserted.
• Reserve the type attribute for cases where the numbering style itself carries meaning (e.g. legal outline styles); for purely visual styling, prefer CSS list-style properties, which belong to the CSS course.
• Always close every <li> and <ol> tag explicitly, even though browsers can recover from missing end tags — it keeps markup valid and easier to read.
• Nest lists inside an <li>, never as a direct sibling of one, to keep the hierarchy valid.
• Use the value attribute sparingly, and only when you genuinely need to skip or restart numbering (e.g. documenting steps 1–3 and then continuing at step 7 on a separate page).

Practice Exercises

1. Write an ordered list of five steps for making a cup of tea. Do not include any numbers as text — let the browser generate them.

2. Create an ordered list ranking your top 3 favorite movies using type="A" so the markers render as uppercase letters instead of numbers.

3. Build a nested list: an outer <ol> with two main steps, where the first main step contains its own inner <ol> with two sub-steps. Verify the sub-list’s numbering restarts independently of the outer list.

Summary

• <ol> creates a numbered list; each direct child must be an <li>.
• Numbering is generated by the browser as a marker, not inserted as literal text in the DOM.
• The type attribute changes the marker style (numbers, letters, or roman numerals); start sets the initial count; reversed counts down; per-item value overrides an individual counter.
• Use <ol> when sequence or rank is part of the meaning; use <ul> otherwise.
• Nested lists belong inside an <li> and maintain their own independent counter.