HTML lists

Choose by whether order changes meaning

Use ol when sequence or rank matters. Use ul when the items form a set but their order is not essential.

<h2>Make tea</h2>
<ol>
  <li>Boil fresh water.</li>
  <li>Steep the tea.</li>
  <li>Remove the leaves.</li>
</ol>

Every direct child of ol or ul is an li. Put a nested list inside the list item it expands.

Why list markup matters

Assistive technology can announce the number of items and let a reader move through the group. Visual bullets created with arbitrary characters do not provide that relationship.

How browsers actually behave

The browser creates list and list-item roles for ul, ol, and li, then generates markers through default styles. Ordered list numbering is presentation backed by document semantics: starting values and reversed order can be represented without typing numbers into each item.

Only list items belong directly inside ul and ol. Nested lists go inside the parent li whose subitems they refine. The parser may recover from invalid children, but the resulting accessibility tree and CSS selectors can be surprising.

Decisions and trade-offs

Choose ol when sequence, rank, or count changes meaning; choose ul when the group matters but order does not. Use dl for name-value or term-description groups, not as a generic two-column layout. A group of unrelated paragraphs is not a list merely because bullets would look attractive.

Navigation links are often a list because they form a related set, but a single link does not need a one-item list. CSS can remove or change markers while preserving semantics. Be cautious: some browser and assistive-technology combinations may reduce list announcement when list styles remove all visual markers, so test the actual pattern.

Accessibility consequences

List semantics communicate grouping and count before each item is read. Deep nesting increases cognitive load and produces long announcements; rewrite the information when more than a few levels are required. Each item should remain a coherent unit rather than a container for an entire unrelated page section.

Custom markers must retain contrast and adapt to zoom. Do not use a background image as the only status cue. If an icon adds meaning such as completion, pair it with visible text or another programmatic state.

Common failures and fixes

• Screen readers announce separate paragraphs instead of a set. Visual bullets were typed manually. Use a real list.
• Numbering becomes incorrect after editing. Numbers are part of the text. Let ol generate them and use attributes only for a meaningful start.
• Nested items appear as siblings. The nested list sits outside its parent item. Move it inside the relevant li.
• A description list reads awkwardly. It was chosen for layout, not associations. Use ordinary headings or a data table when those better fit.

Verify it

Inspect the DOM and accessibility tree for list and item roles. Navigate with a screen reader and confirm the announced count and nesting match the visible group. Disable CSS to verify the relationship remains obvious. At 320 CSS pixels and 200% text zoom, check markers, indentation, long item wrapping, and nested content. Validate the markup to catch invalid direct children.

Exercise and next step

Mark up a packing checklist and a set of turn-by-turn directions. Explain why one can be unordered while the other should be ordered. Next, compare list relationships with genuine row-and-column relationships in the tables lesson.

Boundary of this lesson

List markup does not make an arbitrary collection coherent. Items need a shared relationship that a reader can name, and ordered steps need a sequence that can actually be followed. If each item contains several independent facts, give the content headings or separate sections rather than forcing it into one deeply nested list. Review the wording as well as the DOM: parallel grammar, concise labels, and an honest count often improve usability more than custom bullets.

Practice with structure changes

Take a nested checklist and remove, reorder, and insert items. Confirm generated numbering, announced counts, and nesting stay correct without editing numbers inside the text. Then convert one group to ordinary headings and paragraphs. Compare which version is easier to scan and explain the shared relationship in the list version. The exercise prevents list semantics from becoming a default layout habit.

Review the result with markers hidden and CSS disabled. Item boundaries and nesting should remain understandable from source order and semantics alone. Then read the longest item at 200% text zoom and 320 CSS pixels; wrapping must not detach its marker, overlap a nested list, or create page-level horizontal scrolling.