HTML Ordered List is created by the HTML <ol> tag, to display elements in an ordered form, either numerical or alphabetical. Each item within the list is placed within a <li> tag, which stands for “list item”.
The list is automatically numbered by the browser, but the style
of numbering can be adjusted using attributes and CSS.
Syntax:
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Example – Creating a 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>
Output:
HTML Ordered Lists – Type Attribute
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. Number – 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>
Output:
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>
Output:
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>
Output:
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>
Output:
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 Numbers Ordered List
</title>
</head>
<body>
<h2>
Lowercase 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>
Output:
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:
<!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>
Output:
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: 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>
Output:
8. 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>
Output:
