Last Updated : 22 Jul, 2024
Comments
Improve
HTML Ordered List is created by the HTML <ol> tag, to display 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. |
Types of HTML Ordered Lists
Table of Content
- Number List
- Uppercase Letters
- Lowercase Letters
- Uppercase Roman Numbers
- Lowercase Roman Numbers
- Control List Counting
- Nested Ordered Lists
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.
<!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.
<!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.
<!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.
<!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.
<!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.
<!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
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.
<!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
HTML Ordered Lists – FAQs
What is an HTML ordered list?
An HTML ordered list is a list of items that are displayed in a specific sequence, each item numbered automatically.
How to create an ordered list in HTML?
Use the <ol> tag with nested <li> (list item) tags to create an ordered list.
What does the <ol> tag represent?
The <ol> tag represents an ordered list, which typically displays items with numbers or letters.
How to specify the type of numbering in an ordered list?
Use the type attribute in the <ol> tag to specify the numbering type (e.g., 1, A, a, I, i).
How to start an ordered list with a specific number?
Use the start attribute in the <ol> tag to set the starting number. Example: <ol start=”5″>
What is the reversed attribute used for in an ordered list?
The reversed attribute reverses the order of the list, making it count down instead of up.
amit_singh27
Improve
Previous Article
HTML Lists
Next Article
HTML Unordered Lists
