HTML Ordered Lists
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:
- Item a
- Item b
- Item c
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
<!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:
<!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:
<!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:
<!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:
<!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:
<!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:
<!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
<!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
<!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>
