HTML ordered-list numbering: keep source order and displayed rank aligned

Choose the contract

A case report excerpt begins at procedure step four because the first three steps are in an earlier section. The visible number must match the written instruction, so start is meaningful here. A separate countdown is explicitly descending and uses reversed. Keep the source in the same reading order as the screen. If a design merely wants a different marker shape, use styling instead of inventing a new sequence. The browser counts direct list items, including ones whose content wraps or includes nested prose; manually typing numbers into the text creates two competing numbering systems. For a procedure split across pages, confirm that the sequence and links to earlier steps remain understandable without CSS.

<section aria-labelledby="handoff-steps">
  <h2 id="handoff-steps">Parcel handoff, continued</h2>
  <ol start="4">
    <li>Match the seal code to the intake record.</li>
    <li>Place the parcel in bay C-47.</li>
    <li>Record the receiving officer.</li>
  </ol>
  <h2>Final checks before release</h2>
  <ol reversed>
    <li>Confirm the receiving signature.</li>
    <li>Verify the bay assignment.</li>
    <li>Check the seal photograph.</li>
  </ol>
</section>

Cost and verification

The markup has negligible transfer cost and requires no script. The first list renders 4, 5, 6; the three-item reversed list renders 3, 2, 1. If items are inserted or removed, reversed numbering without an explicit start adjusts to the number of list items. Test the labels with styles disabled and with a screen reader, particularly if CSS replaces markers. A skipped rank can be deliberate, but it should be explained in content rather than hidden in a value attribute.

Common Mistakes

• Do not use CSS order to reverse the visual list while leaving reading order unchanged.
• Do not type a second number inside each list item.
• Do not use an ordered list for unrelated cards merely because the design numbers them.

Connected lessons

• HTML lists: choose ordered, unordered, or term-description structure
• HTML headings and paragraphs: expose a readable outline without styling tricks
• HTML article and section: mark standalone content and named subdivisions

Related CSS decisions

• CSS @counter-style: give a finite marker set an honest fallback