The ul, ol, and li elements

Definition

ul represents an unordered list, ol an intentionally ordered list, and li one item in either list.

Syntax

<ul>
  <li>Semantic HTML</li>
  <li>Responsive CSS</li>
  <li>Minimal JavaScript</li>
</ul>

Context and attributes

List containers accept list items as their children. An ordered list can use start, reversed, or item value when numbering carries real meaning.

Choose ol when changing the sequence would change the instructions, ranking, or chronology. Choose ul when the items belong together but order is not part of their meaning. A description list is a different structure for name-value groups and is not interchangeable with ul or ol.

Accessibility

List semantics expose grouping and item count. If CSS removes markers, test that the list is still announced correctly in supported assistive technology.

Useful list items should be parallel enough to scan. A list with one item usually does not communicate a meaningful group. Very long paragraphs may be clearer as sections with headings rather than dozens of oversized bullets.

Nested lists

A nested list belongs inside the parent li whose item it expands. That relationship exposes hierarchy and keeps numbering or bullets aligned with the correct parent. Close the nested list before closing its parent item.

Do not simulate nesting with margin alone. Visual indentation without document structure disappears in reader modes and can produce a flat, confusing accessibility tree.

Lists in navigation

Navigation links may be grouped in a list when the collection itself matters, such as a site menu or table of contents. The surrounding nav supplies the region; the list supplies grouping and item count; each anchor supplies navigation.

Not every row of links requires list markup. A small breadcrumb trail may use an ordered list because it represents hierarchy, while two unrelated utility links may not need a list. Choose the structure that reflects the relationship.

Styling and counters

CSS can change markers, spacing, and counters without replacing list semantics. Ensure custom markers remain visible in forced colors and do not carry information that the text omits. Generated counter text may not be announced consistently, so keep required step numbers in meaningful markup when the number matters.

Common misuse

Do not create visual bullet rows with repeated characters and generic containers. A nested list belongs inside the list item it expands.

Verification checklist

• Disable CSS and confirm list grouping, order, and nesting remain clear.
• Reorder an ol mentally; if meaning does not change, consider ul.
• Inspect screen-reader list navigation and announced item counts.
• Test custom markers in forced colors and at 200% zoom.
• Keep interactive controls inside items valid and keyboard reachable.