An HTML Ordered List is created using the <ol> tag to display items in a specific sequence, typically numbered or alphabetically ordered. Each list item is defined using the <li> (list item) tag. Ordered lists are widely used for instructions, rankings, and step-by-step guides—appearing in over 60% of structured web content that requires clear, sequential formatting.
This is how the HTML Ordered list will be displayed in a browser:
The list is automatically numbered by the browser, but the style of numbering can be adjusted using attributes and CSS.
Syntax:
<ol>
<li>Milks</li>
<li>Eggs</li>
<li>Breads</li>
<li>Butter</li>
</ol>
Basic Ordered List
index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple Ordered List</title>
</head>
<body>
<h2>My To-Do List</h2>
<ol>
<li>Go grocery shopping</li>
<li>Pay utility bills</li>
<li>Prepare dinner</li>
</ol>
</body>
</html>
Different Type Attributes in HTML Ordered List
The type attribute of <ol> tag specifies the order we want to create.
| Type | Descriptions |
|---|
| type="1" | This will list the items with numbers (default) |
| type="A" | This will list the items in uppercase letters. |
| type="a" | This will list the items in lowercase letters. |
| type="I" | This will list the items with uppercase Roman numbers. |
| type="i" | This will list the items with lowercase Roman numbers. |
1. Numbered Ordered List
To create an ordered list in HTML with numerical markers, which is the default behavior for ordered lists, you simply use the <ol> (ordered list) tag without specifying a type attribute.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Numbered List Example</title>
</head>
<body>
<h2>Ordered List with Numbers</h2>
<ol>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>C#</li>
</ol>
</body>
</html>
2. Uppercase Letters Ordered List
To create an ordered list in HTML that uses uppercase letters for the list markers, you can use the type attribute on the <ol> tag and set it to "A".
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>
Uppercase Letters Ordered List
</title>
</head>
<body>
<h2>Uppercase Letters Ordered List</h2>
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
</ol>
</body>
</html>
3. Lowercase Letters Ordered List
To create an ordered list in HTML that uses lowercase letters for the list markers, you can use the type attribute on the <ol> tag and set it to "a".
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>
Lowercase Letters Ordered List
</title>
</head>
<body>
<h2>Lowercase Letters Ordered List</h2>
<ol type="a">
<li>RCB</li>
<li>CSK</li>
<li>DC</li>
<li>MI</li>
</ol>
</body>
</html>
4. Uppercase Roman Numbers Ordered List
To create an ordered list in HTML with uppercase Roman numerals as the markers, you can use the type attribute on the <ol> tag and set it to "I".
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>
Uppercase Roman Numbers Ordered List
</title>
</head>
<body>
<h2>
Uppercase Roman Numbers Ordered List
</h2>
<ol type="I">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</body>
</html>
5. Lowercase Roman Numbers Ordered List
To create an ordered list in HTML with lowercase Roman numerals as the markers, you can use the type attribute on the <ol> tag and set it to "i".
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Lowercase Roman Numerals List</title>
</head>
<body>
<h2>Lowercase Roman Numerals Ordered List</h2>
<ol type="i">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</body>
</html>
Reverse Ordered List in HTML
To create a reverse-ordered list in HTML, you can use the 'reversed' attribute in the <ol> tag. This will make the list count down from the highest number.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Reverse Ordered List</title>
</head>
<body>
<h1>Top 5 Movies to Watch</h1>
<ol reversed>
<li>The Shawshank Redemption</li>
<li>The Godfather</li>
<li>Inception</li>
<li>Interstellar</li>
<li>Pulp Fiction</li>
</ol>
</body>
</html>
Control List Counting
To control list counting, use the 'start' attribute in the <ol> tag to set the starting number for the ordered list.
Example: In this example we showcase an ordered list starting from the number 5, controlled by the “start” attribute within the <ol> tag, customizing list counting
index.html
<!DOCTYPE html>
<html>
<head>
<title>Control List Counting</title>
</head>
<body>
<h2>Control List Counting</h2>
<ol start="5">
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ol>
</body>
</html>
Nested Ordered Lists
Nested ordered lists use <ol> inside <li> tags to create sublists, making content more organized.
Example: In this example we are creating nested ordered list, listing programming languages with their respective frameworks as subitems
index.html
<!DOCTYPE html>
<html>
<head>
<title>Nested Ordered List</title>
</head>
<body>
<h2>Nested Ordered List</h2>
<ol>
<li>
JavaScript
<ol>
<li>React</li>
<li>Angular</li>
<li>Vue.js</li>
</ol>
</li>
<li>
Python
<ol>
<li>Django</li>
<li>Flask</li>
<li>Pyramid</li>
</ol>
</li>
</ol>
</body>
</html>
Similar Reads
HTML Tutorial
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
10 min read
HTML Introduction
HTML stands for Hyper Text Markup Language, which is the core language used to structure content on the web. It organizes text, images, links, and media using tags and elements that browsers can interpret. As of 2025, over 95% of websites rely on HTML alongside CSS and JavaScript, making it a fundam
6 min read
HTML Editors
An HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi
5 min read
HTML Basics
HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over
6 min read
HTML Comments
HTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser.They are useful for documenting the code, making it easier to understand and maintain.To add a comment, use the syntax <!-- your comment here -->. HTML<!-- This is a comment and will n
4 min read
HTML Elements
An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings.For example, the <p> ele
5 min read
HTML Attributes
HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value
8 min read
HTML Headings
HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate.Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page
4 min read
HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph.Syntax:<p> Content</p>H
5 min read
HTML Text Formatting
HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of ContentCategories of HTML Text FormattingLogic
4 min read