HTML <ol> Tag

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 4 Examples
HTML5 Standard
HTML ol tag tutorial — ordered numbered lists with li elements
Overview

What You’ll Learn

The <ol> tag structures ordered lists on webpages. This guide covers syntax, numbering attributes, nested lists, common use cases, and how ol differs from ul.

01

Ordered Lists

Sequential numbered content.

02

li Items

Each entry inside list items.

03

type Attribute

Numbers, letters, Roman numerals.

04

start & reversed

Control list numbering.

05

Nesting Lists

Hierarchical sub-lists.

06

ol vs ul

Ordered vs unordered lists.

Fundamentals

What Is the <ol> Tag?

The <ol> tag is an HTML element used to create ordered lists, where each list item is sequentially numbered or lettered. Understanding how to use this tag is essential for crafting well-organized, step-by-step content.

✅
Valid HTML5 — Use With <li>

Every item in an ordered list must be wrapped in an <li> element. Browsers automatically generate markers (1, 2, 3…) based on list attributes and CSS.

Foundation

📝 Syntax

To employ the <ol> tag, encapsulate each list item within <li> tags:

syntax.html
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Syntax Rules

  • ol is the container; only li (and script-supporting elements) should be direct children.
  • Nested lists go inside an li, not directly under ol.
  • Default numbering uses Arabic numerals (1, 2, 3).
  • Style markers with the type, start, or reversed attributes, or CSS list-style-type.
Cheat Sheet

⚡ Quick Reference

TopicCode SnippetNotes
Basic ol<ol><li>...</li></ol>Default 1, 2, 3
Letterstype="A" or type="a"Upper / lower case
Romantype="I" or type="i"I, II, III
Start at Nstart="5"HTML5 attribute
ReversereversedCount downward
CSS stylinglist-style-type: lower-alpha;Modern approach
Comparison

⚖️ <ol> vs <ul>

ElementMarkerWhen to Use
<ol>Numbers, letters, RomanSteps, rankings, sequences
<ul>Bullets (disc, circle)Unordered collections
<li>Child of bothIndividual list item

ol (ordered)

  1. Step one
  2. Step two
  3. Step three

ul (unordered)

  • Feature A
  • Feature B
  • Feature C
Reference

🧰 Attributes

The <ol> tag supports attributes to customize numbering. The most common is type, which specifies the numbering style:

attributes.html
<ol type="1">
  <!-- Arabic numerals (default) -->
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol type="A">
  <!-- Uppercase letters -->
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ol>

<ol type="a">
  <!-- Lowercase letters -->
  <li>Item a</li>
  <li>Item b</li>
  <li>Item c</li>
</ol>

<ol type="I">
  <!-- Uppercase Roman numerals -->
  <li>Item I</li>
  <li>Item II</li>
  <li>Item III</li>
</ol>

<ol type="i">
  <!-- Lowercase Roman numerals -->
  <li>Item i</li>
  <li>Item ii</li>
  <li>Item iii</li>
</ol>
type Numbering

Values: 1, A, a, I, i.

type="A"
start HTML5

Sets the starting number for the first li.

start="5"
reversed HTML5

Counts list items in descending order.

<ol reversed>
value (on li) Item

Override numbering for a single list item.

<li value="10">
Try type Attributes

For new projects, CSS list-style-type is often preferred over the type attribute for presentation, keeping HTML semantic.

Structure

🧩 Nesting Lists

You can nest ordered lists within each other to create a hierarchical structure. Place the nested ol inside a parent li:

nesting-lists.html
<ol>
  <li>Main item 1</li>
  <li>Main item 2
    <ol>
      <li>Subitem 2.1</li>
      <li>Subitem 2.2</li>
    </ol>
  </li>
  <li>Main item 3</li>
</ol>
  1. Main item 1
  2. Main item 2
    1. Subitem 2.1
    2. Subitem 2.2
  3. Main item 3
Try Nesting Lists
Hands-On

Examples Gallery

Real-world ordered lists for tutorials, procedures, and step-by-step instructions.

👀 Live Preview

Default ordered list with Arabic numerals:

  1. First item
  2. Second item
  3. Third item

📚 Common Use Cases

Use <ol> for content that follows a specific order or sequence—tutorial steps, ranked lists, and procedural instructions.

Numbered Steps

Present sequential steps such as a software tutorial or recipe.

numbered-steps.html
<ol>
  <li>Open the application.</li>
  <li>Select "File" from the menu.</li>
  <li>Click "Save."</li>
</ol>
Try It Yourself

Procedures and Instructions

Maintain a clear, organized flow when providing assembly or setup instructions.

procedures-and-instructions.html
<ol>
  <li>Assemble the components.</li>
  <li>Connect the cables.</li>
  <li>Power on the device.</li>
</ol>
Try It Yourself
A11y

♿ Accessibility

  • Semantic sequence — Screen readers announce list length and position, conveying order to users.
  • Use ol for steps — Do not fake numbers in plain paragraphs when order matters.
  • Meaningful items — Each li should be a complete, understandable step or point.
  • Nest correctly — Sub-lists inside li preserve logical hierarchy for assistive tech.

🧠 How <ol> Works

1

Author creates ol

Open an ordered list container and add li children.

Markup
2

Browser assigns markers

Numbers or letters appear based on type, start, and CSS.

Rendering
3

User reads sequence

Visual order and screen reader position convey step sequence.

UX
=

Clear, numbered content

Readers follow steps and ranked information without confusion.

Compatibility

Browser Support

The <ol> tag is supported in all major browsers including Internet Explorer. No polyfills are needed.

✓ Baseline · Since HTML 2

Universal ordered list support

Every browser renders <ol> and <li> with list markers. HTML5 start and reversed are supported in all modern browsers.

100% Core tag support
Google Chrome Fully supported
Full support
Mozilla Firefox Fully supported
Full support
Apple Safari Fully supported
Full support
Microsoft Edge Fully supported
Full support
Internet Explorer Fully supported · EOL
Full support
Opera Fully supported
Full support
<ol> tag 100% supported

Bottom line: Use <ol> confidently for ordered content in any browser.

Wrap Up

Conclusion

Mastering the <ol> tag empowers you to structure content in a way that is visually appealing and logically organized. Incorporate ordered lists into your HTML toolkit to create clear, numbered content that enhances the user experience.

View Examples Gallery Try numbered steps
Pro Tips

💡 Best Practices

✅ Do

  • Use appropriate numbering styles for context
  • Indent nested lists consistently
  • Combine with CSS for custom styling
  • Use ol when step order matters

❌ Don’t

  • Use ol for unordered bullet lists
  • Put nested ol directly under ol (skip li)
  • Hand-type numbers in paragraphs for steps
  • Skip li wrappers around list content
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <ol>

Bookmark these before you build step-by-step content.

6
Core concepts
📋 01

Ordered List

Sequential numbered items.

Behavior
📝 02

li Children

Each item in li tags.

Structure
⚙️ 03

type Attribute

1, A, a, I, i markers.

Attributes
🔄 04

Nesting

Sub-lists inside li.

Hierarchy
⚖️ 05

vs ul

Ordered vs bullets.

Comparison
🌐 06

100% Support

All browsers.

Compatibility
🎯 You’re ready to build ordered lists in HTML
Review Quick Reference →

❓ Frequently Asked Questions

It creates ordered lists with sequential numbering for steps, rankings, and sequences.
ol uses numbers or ordered markers; ul uses bullets.
1, A, a, I, and i.
Yes. Place a nested ol or ul inside an li element.
Use start="5" on the ol element.

Build Clear Step-by-Step Lists

Practice <ol> with type attributes and nesting in the Try It editor.

Try type Attributes →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML object Tag HTML optgroup Tag