HTML lists: choose ordered, unordered, or term-description structure

Use it for a real task

Receipt processing has steps whose order matters and properties whose order does not. Use ol for the approval sequence. Use dl for a term and its value when the content is a small set of definitions; do not force key-value data into a visual row of unrelated div elements.

<h2>Approval sequence</h2>
<ol>
  <li>Verify the receipt ID.</li>
  <li>Check the amount against the ledger.</li>
  <li>Approve the export.</li>
</ol>
<h2>Batch details</h2>
<dl>
  <dt>Batch ID</dt><dd>RB-47</dd>
  <dt>Status</dt><dd>Awaiting review</dd>
</dl>

What the markup guarantees

The ordered list preserves the process sequence even without CSS. A definition list communicates paired terms and descriptions; for a large cross-referenced data matrix, use a real table instead.

Cost and limits

The DOM stays compact. The main cost is editorial: list order, nesting, and labels must stay accurate when a workflow changes.

Common Mistakes

• Do not make a numbered workflow from plain paragraphs and CSS counters alone.
• Do not put unrelated sections into one list just to align them.
• Use table headers when both rows and columns define values.

Connected lessons

• HTML data tables: name row and column relationships explicitly
• HTML headings and paragraphs: expose a readable outline without styling tricks
• HTML article and section: mark standalone content and named subdivisions

Related: HTML data tables: name row and column relationships explicitly.

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

Style this pattern

• CSS list markers and counters: change appearance without changing order

Related CSS decisions

• CSS display contents: remove a layout box with care

Related CSS decisions

• CSS :nth-child(of selector): count only the rows that match