HTML Ordered Lists
Last Updated :
18 Apr, 2024
HTML Ordered List is created by the HTML <ol> tag, to displays elements in an ordered form, either numerical or alphabetical. Within the <ol> tag, list items <li> are used to define the items in sequential order.
Syntax:
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
Ordered List Type Attribute with value:
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. |
HTML Ordered Lists Examples
Number List
HTML Numbered Lists <ol> tag creates an ordered list. Each item is listed sequentially, typically denoted by numbers.
Example: In this example we demonstrates an ordered list (<ol>) with five programming languages listed sequentially, each item numbered automatically by the browser.
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>
Output:
HTML Ordered number list Example Output
Uppercase Letters:
HTML Uppercase Letters Utilize the “type” attribute within the <ol> tag, set to “A” to generate an ordered list with uppercase alphabetical enumeration.
Example: In this example we displays an ordered list with uppercase letters (A, B, C, etc.) using the “type” attribute within the <ol> tag.
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>
Output:
HTML Uppercase Ordered list example Output
Lowercase Letters:
HTML Lowercase Letters Utilize the “type” attribute within the <ol> tag, set to “a” to create an ordered list with lowercase alphabetical numbering.
Example: In this example we are showing an ordered list with lowercase letters (a, b, c, d, etc.) using the “type” attribute within the <ol> tag, listing cricket teams.
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>
Output:
Lowercase Letters Ordered list Example Output
Uppercase Roman Numbers:
HTML Uppercase Roman Numbers is set by the “type” attribute within the <ol> tag to “I” for an ordered list with uppercase Roman numeral enumeration.
Example: In this example we displays an ordered list with uppercase Roman numerals (I, II, III, IV) as the numbering, listing four items sequentially.
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>
Output:
Uppercase Roman Numbers Ordered List Example Output
Lowercase Roman Numbers:
HTML Lowercase Roman Numbers is use the “type” attribute within the <ol> tag, set to “i” for an ordered list with lowercase Roman numeral enumeration.
Example: In this example we displays an ordered list with lowercase Roman numerals (i, ii, iii, iv, etc.), utilizing the “type” attribute within the <ol> tag.
HTML
<!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:
Lowercase Roman Numbers Ordered List Example Output
Control List Counting
HTML Control List Counting we use the “start” attribute within the <ol> tag to specify the starting number for ordered lists, customizing counting.
Example: In this example we showcases an ordered list starting from the number 5, controlled by the “start” attribute within the <ol> tag, customizing list counting.
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>
Output:
Control List Counting Ordered list example Output
Nested Ordered Lists
HTML Nested Ordered Lists use <ol> within <li> tags to create sublists, enhancing organization and structure for hierarchical content presentation.
Example: In this example we are creating nested ordered list, listing programming languages with their respective frameworks as subitems for enhanced organization.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Nasted Ordered List</title>
</head>
<body>
<h2>Nasted 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:
Nasted Ordered List Exampel Output
Share your thoughts in the comments
Please Login to comment...