Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create an ordered list in HTML?

HTML Web Development Front End Technology

An ordered list is a numbered list of items that displays content in a sequential, numbered format. It allows you to control the numbering sequence and group related items in a structured manner. HTML provides the <ol> tag to create ordered lists, with each item defined using the <li> tag.

The <ol> element automatically numbers each list item, starting from 1 by default. You can customize the numbering style using the type attribute to display numbers, letters, or Roman numerals.

Syntax

Following is the basic syntax to create an ordered list in HTML −

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

The <li> tags must be placed inside the <ol> tag to create the list items. Each <li> element represents one item in the ordered list.

Type Attribute Values

The type attribute of the <ol> tag accepts the following values −

Type Value Description Example
1 (default) Numbers 1, 2, 3, 4...
A Uppercase letters A, B, C, D...
a Lowercase letters a, b, c, d...
I Uppercase Roman numerals I, II, III, IV...
i Lowercase Roman numerals i, ii, iii, iv...

Basic Ordered List

Example

Following example creates a simple ordered list with the default numbering −

<!DOCTYPE html>
<html>
<head>
   <title>Basic Ordered List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Fruits List</h2>
   <ol>
      <li>Mango</li>
      <li>Guava</li>
      <li>Apple</li>
      <li>Banana</li>
   </ol>
</body>
</html>

The output displays a numbered list with default numeric ordering −

Fruits List
1. Mango
2. Guava
3. Apple
4. Banana

Uppercase Letters Numbering

Example

Following example uses uppercase letters to mark list items −

<!DOCTYPE html>
<html>
<head>
   <title>Uppercase Letters List</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Programming Languages</h2>
   <ol type="A">
      <li>JavaScript</li>
      <li>Python</li>
      <li>Java</li>
      <li>C++</li>
   </ol>
</body>
</html>

The output shows the list items marked with uppercase letters −

Programming Languages
A. JavaScript
B. Python
C. Java
D. C++

Multiple List Types

Example

Following example demonstrates different numbering styles in separate lists −

<!DOCTYPE html>
<html>
<head>
   <title>Multiple List Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h3>Lowercase Letters</h3>
   <ol type="a">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
   
   <h3>Roman Numerals (Uppercase)</h3>
   <ol type="I">
      <li>Introduction</li>
      <li>Implementation</li>
      <li>Testing</li>
   </ol>
   
   <h3>Roman Numerals (Lowercase)</h3>
   <ol type="i">
      <li>Planning</li>
      <li>Development</li>
      <li>Deployment</li>
   </ol>
</body>
</html>

The output displays three different list styles −

Lowercase Letters
a. HTML
b. CSS
c. JavaScript

Roman Numerals (Uppercase)
I. Introduction
II. Implementation
III. Testing

Roman Numerals (Lowercase)
i. Planning
ii. Development
iii. Deployment

Advanced Ordered List with Start Attribute

Example

The start attribute allows you to begin numbering from a specific value −

<!DOCTYPE html>
<html>
<head>
   <title>Start Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>World Cup Teams (Starting from 5)</h2>
   <ol type="1" start="5">
      <li>India</li>
      <li>Australia</li>
      <li>South Africa</li>
      <li>New Zealand</li>
      <li>Pakistan</li>
   </ol>
</body>
</html>

The list starts numbering from 5 instead of the default 1 −

World Cup Teams (Starting from 5)
5. India
6. Australia
7. South Africa
8. New Zealand
9. Pakistan
Ordered List Structure <ol type="A"> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> ? A. First Item ? B. Second Item ? C. Third Item

Nested Ordered Lists

Example

You can create nested ordered lists by placing one <ol> inside another −

<!DOCTYPE html>
<html>
<head>
   <title>Nested Ordered Lists</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
   <h2>Course Curriculum</h2>
   <ol>
      <li>Web Development
         <ol type="a">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
         </ol>
      </li>
      <li>Backend Development
         <ol type="a">
            <li>Node.js</li>
            <li>Express.js</li>
            <li>MongoDB</li>
         </ol>
      </li>
   </ol>
</body>
</html>

The nested structure creates a hierarchical list with different numbering styles −

Course Curriculum
1. Web Development
   a. HTML
   b. CSS
   c. JavaScript
2. Backend Development
   a. Node.js
   b. Express.js
   c. MongoDB

Conclusion

HTML ordered lists using the <ol> and <li> tags provide a structured way to display numbered content. The type attribute allows customization with different numbering styles (numbers, letters, Roman numerals), while the start attribute controls the starting number. Ordered lists are essential for creating step-by-step instructions, rankings, and any content requiring sequential numbering.

Updated on: 2026-03-16T21:38:53+05:30

4K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements