HTML Ordered Lists
HTML
The <ol> tag defines numerical or alphabetical order list.
HTML Ordered List
➔ Each item will be in <li> tag.
➔ HTML Ordered list starts from number 1 if type attribute is not specified.
➔ Other values for type attribute are type="1", type="i", type="I", type="a", type="A".
➔ Order can be started from anywhere within the range, ex: type="50".
Syntax
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Last item</li>
</ol>
Syntax with type attribute
<h2>An Ordered List (type: number)</h2>
<ol type="1">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Key aspects and best practices of ol tag
➔ When an item needs to be placed in a specific order or sequence, such as a ranking order, instruction order, or any numerical order, then an ordered list is useful.
➔ The ol tag works in conjunction with the li tag, controlling the order type of the list while the li tag contains the actual content of the list.
➔ It is possible to customize the appearance and behavior of ordered lists by using attributes and changing their values.
type: This attribute specifies the type of marker to be used in the list. Most common type values are type='1' for numerical value, type='A' for Uppercase letters, type='a' for lowercase letters, type='I' for Uppercase Roman numerals, type='i' for Uppercase Roman numerals.
start: This attribute specifies the starting value of the corresponding marker type in the list. It helps if the list doesn't start from the beginning.
reverse: This attribute has a boolean value and specifies that the order of the list should be in descending order.
<h2>An Ordered List (with type start reversed attribute)</h2>
<ol type="1" start='10' reversed>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ol>
An Ordered List (with type start reversed attribute)
Example
<!DOCTYPE html>
<html>
<head>
<title>An Ordered List (with type start reversed attribute)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content='charset=utf-8' />
</head>
<body>
<h3>An Ordered List (with type start reversed attribute)</h3>
<ol type="1" start='10' reversed>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ol>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.
An Ordered List(type="1")
- Item1
- Item1
- Item1
An Ordered List(type="a")
- Item1
- Item1
- Item1
An Ordered List(type="A")
- Item1
- Item1
- Item1
An Ordered List(type="i")
- Item1
- Item1
- Item1
An Ordered List(type="I")
- Item1
- Item1
- Item1
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
<meta charset="utf-8" />
</head>
<body>
<h2>An Ordered List</h2>
<ol type="1">
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ol>
<h2>An Ordered List</h2>
<ol type="a">
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ol>
<h2>An Ordered List</h2>
<ol type="A">
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ol>
<h2>An Ordered List</h2>
<ol type="i">
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ol>
<h2>An Ordered List</h2>
<ol type="I">
<li>Item1</li>
<li>Item1</li>
<li>Item1</li>
</ol>
</body>
</html>
Click on the "See output" button to see how it works.