Ordered Lists with ol and li

Technical Deep Dive & Specifications

WHATWG Specification & DOM Interface

According to the WHATWG HTML Living Standard:

• <ol> Element: Represents a list of items where the items have been intentionally ordered, such that changing the order would change the meaning of the document.
  • DOM Interface: HTMLOListElement (inherits from HTMLElement).
  • Permitted Direct Children: Zero or more <li> elements, along with script-supporting elements (<script> and <template>).
• <li> Element: Within an <ol>, the list item holds an ordinal position calculated by the browser's list algorithm.
  • DOM Interface: HTMLLIElement.

The List Item Ordinal Value Algorithm

Browsers maintain an internal integer counter for every <ol> instance:

1. The list starts with an initial value of 1 (unless modified by the start attribute).
2. For each direct child <li>, the browser assigns the current counter value as that item's ordinal value.
3. If an <li> specifies an explicit value="N" attribute, the counter jumps to N.
4. The counter increments by 1 for each subsequent item (or decrements if reversed is active).

[ol container: counter initial = 1]
   |--> <li> (Ordinal: 1) -> counter increments to 2
   |--> <li> (Ordinal: 2) -> counter increments to 3
   |--> <li> (value="10") -> counter set to 10 -> Ordinal: 10 -> counter increments to 11
   +--> <li> (Ordinal: 11)

Screen Reader and Accessibility Tree Mechanics

When a screen reader (such as NVDA, JAWS, or Apple VoiceOver) encounters an <ol>, it announces:

1. The type of list: "Ordered List" (or "Numbered list").
2. The total item count: "5 items".
3. For each item: The positional index: "1 of 5: Disengage parking brakes", "2 of 5: Advance throttles...".

This provides blind and low-vision users with an immediate cognitive map of how long the procedure is and their exact progression through it.

<ul> vs. <ol>: Structural Comparison

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 41: <article class="runbook-card"> establishes the self-contained document unit for the operational procedure.
• Line 43: <ol class="procedure-list"> instructs the browser and screen reader that these 5 steps must be executed sequentially.
• Lines 44–46: <li> contains the first step. The browser automatically prefixes this with 1. without manual text strings.
• Lines 47–58: Subsequent <li> nodes. Notice how code snippets (<code>) and bold headers (<strong>) are legally encapsulated within each list item.

Expected Browser Render Output

+------------------------------------------------------------+
| ⚠️ Primary Database Failover Protocol                      |
|                                                            |
|  1. Verify Primary Outage: Check health probe telemetry    |
|     at /healthz.                                           |
|  2. Sever Ingress Traffic: Drain incoming connection pools  |
|     via API Gateway.                                       |
|  3. Promote Read Replica: Issue command pg_ctl promote     |
|     on Replica Node-02.                                    |
|  4. Update DNS CNAME: Repoint db-primary.internal to the   |
|     promoted replica IP.                                   |
|  5. Resume Traffic: Re-enable traffic routing and verify   |
|     query response latency.                                |
+------------------------------------------------------------+