HTML Ordered Lists: Complete Guide with Examples

HTML Ordered Lists

HTML ordered lists are used when the order of items matters. They are one of the most useful and commonly used list types in HTML. An ordered list automatically displays its items with numbers or another sequence marker, such as letters or Roman numerals.

For example, if you want to show the steps for creating an account, the sequence is important:

Open the website.
Create an account.
Enter your details.
Verify your email address.
Log in.

HTML provides the <ol> element for creating an ordered list and the <li> element for defining each item in that list.

What Is an HTML Ordered List?

An HTML ordered list is a list in which the browser presents items in a specific sequence. By default, browsers usually display ordered-list items with decimal numbers.

The basic structure is:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

The browser renders this approximately as:

First item
Second item
Third item

The <ol> element represents the complete ordered list, while each <li> represents an individual list item.

The `<ol>` Element

The <ol> element stands for Ordered List.

It acts as the container for all the items that belong to the list.

Example:

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

The browser automatically adds the numbering.

An <ol> should normally contain <li> elements as its direct children.

The `<li>` Element

The <li> element stands for List Item.

It defines one item inside an ordered or unordered list.

Example:

<ol>
  <li>Install the software</li>
  <li>Open the application</li>
  <li>Create a new project</li>
</ol>

Here, there are three list items.

The same <li> element can also be used inside an unordered list created with <ul>.

Basic Syntax

The general syntax of an ordered list is:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

You can add as many <li> elements as needed.

For example:

<ol>
  <li>Wake up</li>
  <li>Exercise</li>
  <li>Have breakfast</li>
  <li>Go to work</li>
  <li>Return home</li>
</ol>

Why Use Ordered Lists?

Ordered lists are appropriate when the sequence, ranking, or position of items has meaning.

Common examples include:

Step-by-step instructions
Recipes
Installation instructions
Tutorials
Rankings
Top results
Procedures
Workflows
Examination instructions
Navigation sequences
Rules that must be followed in order

For example, a recipe can use an ordered list because the cooking steps usually need to be followed sequentially.

<ol>
  <li>Boil the water.</li>
  <li>Add the pasta.</li>
  <li>Cook for 8–10 minutes.</li>
  <li>Drain the pasta.</li>
  <li>Add the sauce and serve.</li>
</ol>

Default Numbering

By default, HTML ordered lists use decimal numbers beginning with 1.

<ol>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ol>

The result is:

Apple
Banana
Orange

Modern HTML and CSS generally provide the preferred way to customize list markers.

Changing the List Marker with the `type` Attribute

The <ol> element supports the type attribute for selecting different traditional numbering systems.

Common values include:

Value	Marker style	Example
`1`	Decimal	1, 2, 3
`A`	Uppercase letters	A, B, C
`a`	Lowercase letters	a, b, c
`I`	Uppercase Roman numerals	I, II, III
`i`	Lowercase Roman numerals	i, ii, iii

Decimal Numbers

<ol type="1">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Result:

HTML
CSS
JavaScript

Because decimal numbering is the default, specifying type="1" is usually unnecessary.

Uppercase Letters

<ol type="A">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Result:

A. HTML
B. CSS
C. JavaScript

Lowercase Letters

<ol type="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Result:

a. HTML
b. CSS
c. JavaScript

Uppercase Roman Numerals

<ol type="I">
  <li>Introduction</li>
  <li>Main Content</li>
  <li>Conclusion</li>
</ol>

Result:

I. Introduction
II. Main Content
III. Conclusion

Lowercase Roman Numerals

<ol type="i">
  <li>Introduction</li>
  <li>Main Content</li>
  <li>Conclusion</li>
</ol>

Result:

i. Introduction
ii. Main Content
iii. Conclusion

For modern website design, CSS is generally more flexible than relying on the type attribute.

Starting an Ordered List at a Different Number

The start attribute allows an ordered list to begin at a specific number.

Example:

<ol start="5">
  <li>Fifth item</li>
  <li>Sixth item</li>
  <li>Seventh item</li>
</ol>

The result begins at 5:

Fifth item
Sixth item
Seventh item

This can be useful when an ordered list continues from an earlier section.

Using `start` with Letters

The start attribute works with ordered-list numbering systems as well.

For example:

<ol type="A" start="3">
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ol>

The markers begin at C:

C. Third item
D. Fourth item
E. Fifth item

Reversing an Ordered List

The reversed attribute makes an ordered list count downward instead of upward.

Example:

<ol reversed>
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ol>

The browser displays:

Third
Second
First

The reversed attribute is a Boolean attribute, so it does not require a value.

You can also combine it with start.

<ol reversed start="10">
  <li>Ten</li>
  <li>Nine</li>
  <li>Eight</li>
</ol>

The markers count down from 10.

The `value` Attribute

The value attribute can be used on an individual <li> to specify its ordinal value.

Example:

<ol>
  <li value="10">Ten</li>
  <li>Eleven</li>
  <li>Twelve</li>
</ol>

The list continues from that value:

Ten
Eleven
Twelve

This can be useful when a list has a deliberate numbering structure.

For example:

<ol>
  <li>Introduction</li>
  <li value="5">Advanced Concepts</li>
  <li>Conclusion</li>
</ol>

The browser can use the specified ordinal value and continue numbering from it.

Nested Ordered Lists

Ordered lists can contain other lists. This is called a nested list.

For example:

<ol>
  <li>Web Development
    <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ol>
  </li>
  <li>Programming
    <ol>
      <li>Python</li>
      <li>Java</li>
      <li>C++</li>
    </ol>
  </li>
</ol>

Nested lists are useful for representing hierarchical information.

A list can contain another ordered list, an unordered list, or a combination of both.

Ordered List with an Unordered List

You can combine <ol> and <ul> when the content has different levels of meaning.

Example:

<ol>
  <li>Learn HTML
    <ul>
      <li>Elements</li>
      <li>Attributes</li>
      <li>Forms</li>
    </ul>
  </li>
  <li>Learn CSS
    <ul>
      <li>Selectors</li>
      <li>Properties</li>
      <li>Layouts</li>
    </ul>
  </li>
</ol>

The main topics are ordered, while their subtopics do not require a specific sequence.

Ordered Lists in Navigation

Ordered lists can sometimes be used for navigation structures when the sequence itself has semantic meaning.

However, many website navigation menus use unordered lists because the menu items do not necessarily have a meaningful order.

For example, if a website’s navigation items are simply links:

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

An unordered list is generally more appropriate.

Ordered Lists in Step-by-Step Instructions

One of the best uses of <ol> is displaying instructions.

<ol>
  <li>Open your browser.</li>
  <li>Visit the website.</li>
  <li>Click the Sign Up button.</li>
  <li>Enter your information.</li>
  <li>Submit the form.</li>
</ol>

This communicates that the steps have an intended sequence.

Ordered Lists in Recipes

Recipes are another excellent use case.

<ol>
  <li>Wash the vegetables.</li>
  <li>Cut them into small pieces.</li>
  <li>Heat the pan.</li>
  <li>Add the vegetables.</li>
  <li>Cook until tender.</li>
</ol>

The numbered structure makes the cooking process easy to follow.

Ordered Lists for Rankings

Ordered lists are useful for rankings and positions.

<ol>
  <li>First place</li>
  <li>Second place</li>
  <li>Third place</li>
</ol>

They can also be useful for displaying a list of top recommendations.

Ordered Lists and Accessibility

Semantic HTML is important for accessibility.

Using <ol> tells browsers, screen readers, and other assistive technologies that the content represents an ordered list.

This is better than manually typing numbers into ordinary paragraphs.

Avoid doing this:

<p>1. Open the website.</p>
<p>2. Create an account.</p>
<p>3. Log in.</p>

Prefer:

<ol>
  <li>Open the website.</li>
  <li>Create an account.</li>
  <li>Log in.</li>
</ol>

With the semantic version, the browser manages the numbering and assistive technologies can understand the structure more accurately.

Do Not Manually Number Every List Item

A common mistake is manually adding numbers to <li> elements.

Avoid:

<ol>
  <li>1. HTML</li>
  <li>2. CSS</li>
  <li>3. JavaScript</li>
</ol>

This can result in duplicate numbering because the browser already provides the markers.

Use:

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Styling Ordered Lists with CSS

CSS gives you much greater control over ordered-list markers.

For example:

<style>
  ol {
    list-style-type: upper-roman;
  }
</style>

<ol>
  <li>Introduction</li>
  <li>Development</li>
  <li>Conclusion</li>
</ol>

You can use CSS to change marker types, spacing, positioning, and appearance.

Common list-style-type values include:

decimal
decimal-leading-zero
lower-alpha
upper-alpha
lower-roman
upper-roman
lower-greek
none

Example:

ol {
  list-style-type: lower-alpha;
}

Removing the Default Markers

You can remove the default numbering with CSS:

ol {
  list-style-type: none;
}

This can be useful when creating a custom design.

However, if the order is important, removing the visible markers may reduce visual clarity. Consider whether users still have an obvious way to understand the sequence.

Custom Counters with CSS

CSS counters can be used to create highly customized numbering systems.

For example:

ol {
  counter-reset: section;
  list-style: none;
}

li {
  counter-increment: section;
}

li::before {
  content: counter(section) ". ";
}

This approach is useful for advanced designs where the default list markers are not sufficient.

Styling the Marker

CSS also allows you to style the list marker using ::marker.

Example:

li::marker {
  font-weight: bold;
}

This targets the marker generated by the list.

You can also modify certain visual properties, depending on browser support and CSS rules.

Example:

li::marker {
  font-size: 1.2em;
}

Difference Between `<ol>` and `<ul>`

The two most common HTML list elements are <ol> and <ul>.

Ordered List

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

Use <ol> when the sequence matters.

Unordered List

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Use <ul> when the order does not matter.

The choice should be based on the meaning of the content, not simply on how you want the list to look.

Ordered Lists vs Manually Styled Content

Using semantic lists is usually better than creating a visual list with paragraphs, <div> elements, or manually typed numbers.

For example, this is less semantic:

<div>1. Install the application</div>
<div>2. Open the application</div>
<div>3. Create an account</div>

A better approach is:

<ol>
  <li>Install the application</li>
  <li>Open the application</li>
  <li>Create an account</li>
</ol>

The second version clearly communicates the relationship between the items.

Common Mistakes

Using `<ol>` When Order Does Not Matter

Do not use an ordered list simply because you want numbered markers.

If the order has no meaning, <ul> is generally more appropriate.

Forgetting the Closing Tags

Although HTML can sometimes handle omitted tags, writing complete markup is clearer.

Good:

<ol>
  <li>HTML</li>
  <li>CSS</li>
</ol>

Placing Invalid Direct Children Inside `<ol>`

A typical structure should be:

<ol>
  <li>Item</li>
  <li>Item</li>
</ol>

Do not place arbitrary elements directly inside <ol> when they are not part of the list structure.

For example, if an item contains several paragraphs, put those paragraphs inside the relevant <li>.

<ol>
  <li>
    <p>First step.</p>
    <p>Additional information about the first step.</p>
  </li>
  <li>Second step.</li>
</ol>

Can an Ordered List Contain Links?

Yes. List items can contain links.

<ol>
  <li><a href="/html">Learn HTML</a></li>
  <li><a href="/css">Learn CSS</a></li>
  <li><a href="/javascript">Learn JavaScript</a></li>
</ol>

This is useful for tutorials, courses, indexes, and other structured content.

Can an Ordered List Contain Images?

Yes. Images can be placed inside list items.

<ol>
  <li>
    <img src="html.png" alt="HTML logo">
    Learn HTML
  </li>
  <li>
    <img src="css.png" alt="CSS logo">
    Learn CSS
  </li>
</ol>

Always provide meaningful alternative text when an image conveys useful information.

Ordered Lists in Articles

Ordered lists can improve readability in long articles.

For example, an article explaining how to install software could use:

<ol>
  <li>Download the installer.</li>
  <li>Run the installer.</li>
  <li>Accept the terms.</li>
  <li>Select an installation location.</li>
  <li>Complete the installation.</li>
</ol>

Readers can quickly scan the instructions and understand the sequence.

Ordered Lists and SEO

HTML ordered lists can contribute to clear page structure and semantic markup. They do not provide a special SEO ranking boost simply because <ol> is used.

Their main value is semantic clarity, usability, accessibility, and organization.

Search engines can better understand structured content when HTML elements are used according to their intended purpose.

For example, if an article contains genuine step-by-step instructions, representing them as an ordered list is more meaningful than manually typing numbers into paragraphs.

Ordered Lists and Responsive Design

Ordered lists naturally adapt to different screen sizes because they are standard HTML elements.

You can adjust their spacing with CSS:

ol {
  padding-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
}

For mobile devices, make sure long list items remain readable and do not create unnecessary horizontal scrolling.

Ordered Lists Inside Articles and Blogs

Ordered lists are particularly useful for educational websites, blogs, documentation, and tutorials.

They can be used for:

How-to guides
Programming tutorials
Installation guides
Study instructions
Cooking recipes
Product setup instructions
Troubleshooting procedures
Frequently followed processes
Ranked lists

They can make complex information easier to scan and understand.

A Complete Example

Here is a simple HTML document containing an ordered list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Ordered List</title>
</head>
<body>

  <h2>How to Create an HTML Page</h2>

  <ol>
    <li>Open a text editor.</li>
    <li>Create an HTML file.</li>
    <li>Add the basic HTML structure.</li>
    <li>Write your content.</li>
    <li>Save the file.</li>
    <li>Open it in a web browser.</li>
  </ol>

</body>
</html>

This example demonstrates how an ordered list can present a clear sequence of instructions.

Best Practices for HTML Ordered Lists

Follow these practices when using ordered lists:

Use <ol> when the order of items has meaning.
Use <li> for each list item.
Let the browser generate the numbering instead of manually typing numbers.
Use start when a list needs to begin at a particular position.
Use reversed when the sequence should count downward.
Use type when a traditional numbering style is specifically appropriate.
Prefer CSS for visual customization.
Use nested lists when information has multiple levels.
Keep list items concise and easy to scan.
Use semantic HTML instead of visually simulating lists.
Choose <ul> when the order does not matter.
Consider accessibility when designing custom list styles.

HTML Ordered List Attributes at a Glance

Attribute	Purpose	Example
`type`	Specifies the numbering style	`<ol type="A">`
`start`	Specifies the starting ordinal value	`<ol start="5">`
`reversed`	Makes the list count downward	`<ol reversed>`
`value`	Sets the ordinal value of an individual list item	`<li value="10">`

These features cover most common ordered-list requirements.

Frequently Asked Questions

What is an ordered list in HTML?

An ordered list is a sequence of related items where the order is meaningful. It is created with the <ol> element, with each item represented by <li>.

What is the default ordered-list style?

The default style is decimal numbering, such as 1, 2, 3, and so on.

Which tag is used for an ordered list?

The <ol> tag is used to create an ordered list.

Which tag is used for items inside an ordered list?

The <li> tag defines individual list items.

Can I start an ordered list at 10?

Yes. Use the start attribute:

<ol start="10">
  <li>Item</li>
  <li>Item</li>
</ol>

Can an ordered list count backward?

Yes. Use the reversed attribute:

<ol reversed>
  <li>Three</li>
  <li>Two</li>
  <li>One</li>
</ol>

Can I use letters instead of numbers?

Yes.

<ol type="A">
  <li>First</li>
  <li>Second</li>
</ol>

Can I use Roman numerals?

Yes.

<ol type="I">
  <li>First</li>
  <li>Second</li>
</ol>

Can ordered lists be nested?

Yes. An <ol> can contain list items that contain another <ol> or <ul>.

Should I use `<ol>` or `<ul>`?

Use <ol> when the order matters. Use <ul> when the order does not matter.

Can CSS customize ordered lists?

Yes. CSS can change the marker style, spacing, positioning, and appearance. CSS counters can also be used for more advanced numbering.

Conclusion

HTML ordered lists provide a simple and semantic way to represent information that follows a meaningful sequence. The <ol> element creates the list, while <li> defines each individual item.

For everyday use, the basic structure is enough:

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

When necessary, you can use features such as type, start, reversed, and value to control numbering. CSS provides even greater control over the visual appearance.

The most important rule is simple: use an ordered list when the sequence or position of the items matters. This keeps your HTML semantic, accessible, maintainable, and easy for both people and browsers to understand.