HTML <ol> Tag

The <ol> (ordered list) element is used to create a list of items where the order matters. Each item in the list is automatically numbered or sequenced by the browser, making <ol> ideal for steps, rankings, instructions, or any content that follows a specific progression.

An ordered list is made up of one or more list items, each defined using the <li> tag. The browser handles numbering automatically, ensuring consistency and accessibility without requiring manual numbering.

How <ol> Works

When an <ol> element is rendered, the browser displays each <li> item with a sequential marker, such as numbers (1, 2, 3), letters (a, b, c), or Roman numerals, depending on styling or default settings. The list maintains semantic meaning, allowing assistive technologies and search engines to understand that the content follows a structured order.

For example, an ordered list can represent:

• Step-by-step instructions
• Ranked items
• A sequence of actions
• Ordered data or priorities

Even if the visual numbering is changed through CSS, the underlying semantic order remains intact.

Semantic Importance

The <ol> element plays an important role in semantic HTML. It communicates intent, not just appearance. Screen readers announce the total number of items and their position within the list (e.g., “item 2 of 5”), improving accessibility for users relying on assistive technology.

Using <ol> instead of manually typing numbers also ensures better maintainability. If items are added, removed, or reordered, the browser automatically updates the numbering.

Nesting and Structure

Ordered lists can be nested inside other lists (ordered or unordered), allowing you to create multi-level hierarchies such as sub-steps or grouped instructions. Each nested list maintains its own numbering sequence.

Styling and Customization

While <ol> provides default numbering, its appearance can be customized using CSS. You can control spacing, indentation, numbering style, alignment, and even replace default markers with custom counters or designs - all without altering the semantic meaning of the list.

When to Use <ol>

Use an ordered list when:

• The sequence of items matters
• The order conveys meaning or logic
• The list represents a process or ranking

If order does not matter, an unordered list (<ul>) is usually more appropriate.

Summary

The <ol> element is a fundamental HTML structure used to present ordered information clearly and semantically. It improves readability, accessibility, and maintainability while allowing flexible styling and nesting for complex content layouts.