Introduction to HTML Ordered List

In this section, we will learn how to implement Ordered Lists in HTML. How to describe or display an ordered list? It’s very simple and easy; they are used to describe the list of information in the content. And another technique is a single list can have multiple lists elements on them.

The lists in HTML can be classified into three types, they are:

Ordered List
Unordered list
Definition List

In this article, we shall go through the ordered list specification with an example. The ordered list defines the specific ordered information when a list is created; for instance, it shows ordinate information or numbering the information.

Syntax of Ordered List

Ordered list is created using a tag named <ol> element and ends with</ol> tag.

Examples of Ordered List

Let us see some example mentioned below:

Example #1

<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List</title> </head> <body> <p><strong>There are 6 different airlines:</strong></p> <ol type="1"> <li>Jet Blue Airlines</li> <li>Frontier Airlines</li> <li>South West Airlines</li> <li> Spirit Airlines</li> <li> United Airlines</li> <li>America Airlines</li> </ol> </body> </html>

Output:

This will give you the result like

Example #2

Ordered List with colors. In the following example, we have used a certain counter property, defines the automatic counting list-items in the<li>. It is just an internal variable of CSS to enable counting functions. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List with colors</title> </head> <body> <style> ol li { counter-increment: list; list-style-type: none; position: relative; } ol li:before { color: #ff0000; content: counter(list) "."; left: -22px; position: absolute; text-align: center; width: 24px; }</style> <ol> <li><span> Norway is a Scandinavian Country</span></li> <li><span>Oslo is the capital city</span></li> <li><span>norway is known for its beauty , hiking, fishing</span></li> <li><span>Ranked among the toppest country in europe</span></li> </ol><br/> </body></html>

Output:

Types of Attributes for HTML Ordered List

To represent the ordered list, there are five important types of attributes for this tag. As the HTML <ol> tag represents the list of items in the ordered list, they can be either in alphanumeric, numeric or simply alphabetical order, provided order is the primary thing. Here are the possible attributes of the Ordered list:

1. The Type attribute

This attribute gives the type of numbering to be used in the list.

type =’a’ – Gives alphabetical order
type =’A’- Gives Upper case Alphabetical order
type =’i’ – Gives Roman number lower case
type =’ I’- Gives Upper case Roman numbers

These type of numbering are mentioned below:

I. Attribute type=’a.’

To make a list in alphabetical lower case, this type is used. The following example shows the ordered list in the lowercase and made it in italic.

Example:

<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List types</title> </head> <body> <style> ol li span { font-weight: normal; } </style> <p>Did you know that:</p> <p>Skills required to become a data Scientist</p> <ol type="a" > <li><span><i> steps</span></i></li> <li><span><b>There should be a prior knowledge in SAS and R programming.</b></span></li> <li><span><b>They should have a strong calibre in creativity and analysis</span><b></li> </ol> </body> </html>

Output:

II. Attribute type=’A.’

An ordered list can have an attribute type of alphabet lowercase. The below example demonstrates how to use this attribute in the list structure and also how to make the letters in bold. To have the ordered list in bold, it is to be declared using <style> tag.

Example:

<!DOCTYPE html> <html> <head> <title> Example for Nested list</title> </head> <body> <p> State capitals of the united States</p> <style> ol { font-weight:bolder; } ol li span { font-weight: normal; } </style> <ol type="A"> <li> <span>Alabama <ul> <li>Montgomery</li> </ul> </span> </li> <li><span>Arizona <ul> <li>Phoenix</li> </ul> </span> </li> <li> <span>California <ul> <li>Sacramento</li> </ul> </span> </li> <li> <span>New jersey <ul> <li>Trenton</li> </ul> </span> </li> <li><span>Washington <ul> <li>Olympia</li> </ul></span> </li> <li> <span>Pennsylvannia <ul> </span> <li>Harisburg</li></ul> </li> </ol> </body> </html>

Output:

III. Attribute type=’i.’

This functionality indicates lower case roman letters.

Example:

<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List types</title> </head> <body> <p> EDUCBA HTML List Tutorial:</p> <ol> <li value="4" >Ordered list</li> <li>unordered list</li> <li>Definition list <ol type="i" > <li> <i>Introduction to list </i></li> <li><i>Syntax a List</i></li> <li><i> Types with an example</i> </ol> </li> <li>Snapshots</li> </ol> </body>

Output:

IV. Attribute type=’ I.’

This functionality gives the output in Upper Roman Numerals.

Example:

<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List Demo</title> </head> <body> <h2> List of Vegetables</li> <ol type="I"> <li>Carrot</li> <li> Radish</li> <li> Sweet Corn</li> </ol> <ol> <li>Fruits List <ol type="a"> <li>Pomegrante</li> <li>Bananas</li> <li>Pears</li> </ol> </li> </body> </html>

Output:

2. The Start Attribute

The start attribute defines the start value for the ordered list numbers. You can start with any number from the beginning, not just from the default number ‘1’. Example: start=6. It’s been used now in HTML5.

Example:

In the following example, I have used style type to upper_alpha along with a start from =3; therefore, the output is shown from ‘C’.

<!DOCTYPE html> <html> <head> <title> Example for Nested list</title> </head> <body> <p> RICHEST COUNTRIES IN THE WORLD</p> <style> ol { list-style-type: upper-alpha; font-weight:bolder; } ol li span { font-weight: normal;} </style> <ol start="3"> <li>Quatar known for his oil and petrochemical reserves</li> <li>Norway known for the beauty of nature with petroleum producer</li> <li>Singapore with global trade center</li> </ol> </body> </html>

Output:

3. The Reverse Attribute

This is the new attribute introduced in HTML5, which indicates the items are displayed in the reverse order in the web browsers. To use, <ol reversed> it’s a Boolean attribute taking any value to it to reverse the counter. Declared <ol reversed =” True”> in the <ol> tag.

Example:

<!DOCTYPE html> <html lang="en"> <head> <title>HTML Ordered List</title> </head> <body> <h2>How to do Balle Technique</h2> <ol> <li>Turn out</li> <li>Alignment</li> <li>Pointed Toes</li> </ol> <hr> <h2> Balle Steps</h2> <ol reversed="True"> <li>Seven Movements</li> <li>Plier</li> <li>Etendre </li> <li>Glisser</li> <li>Eliever</li> </ol> </body> </html>

Output:

Conclusion

Therefore, I have summarized what the ordered list has done to the end, and it is almost supported in all browsers. Certainly, you can create any numbers of lists in the HTML tag element; in this article, we just focused on selected examples to understand the basic implementation. Thus, learning this topic might not the toughest job, as the <ol><li> tag used here is very simple to remember.

Introduction to HTML Ordered List