HTML ordered lists use the <ol> tag to present items in a defined sequence, ensuring clear and structured display of step-based or ranked content.
- Uses <ol> to create a list with a specific order or sequence.
- Each item is defined using the <li> tag.
- Items are automatically numbered or lettered by the browser.
- Numbering style can be customized using attributes or CSS.
- Commonly used for instructions, steps, and rankings.
<!DOCTYPE html>
<html>
<head>
<title></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>
Syntax:
<ol>
<li>Milks</li>
<li>Eggs</li>
<li>Breads</li>
<li>Butter</li>
</ol>
Different Type Attributes in HTML Ordered List
The type attribute of <ol> tag specifies the order we want to create.
- 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: Implementation of a default ordered list where items are displayed in numeric sequence.
<!DOCTYPE html>
<html>
<head>
<title></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: Implementation of an ordered list using the type="A" attribute to display items in uppercase alphabetical order.
<!DOCTYPE html>
<html>
<head>
<title></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: Implementation of an ordered list using the type="a" attribute to display items in lowercase alphabetical order.
<!DOCTYPE html>
<html>
<head>
<title></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: Implementation of an ordered list using the type="I" attribute to display items in uppercase Roman numerals.
<!DOCTYPE html>
<html>
<head>
<title></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: Implementation of an ordered list using the type="i" attribute to display items in lowercase Roman numerals.
<!DOCTYPE html>
<html>
<head>
<title></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>
6. 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: Implementation of an ordered list using the reversed attribute to display items in descending order.
<!DOCTYPE html>
<html>
<head>
<title></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>
7. 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: 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></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>
8. Nested Ordered Lists
Nested ordered lists use <ol> inside <li> tags to create sublists, making content more organized.
Example: Creating nested ordered list, listing programming languages with their respective frameworks as subitems
<!DOCTYPE html>
<html>
<head>
<title></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>