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:
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.
Ordered list is created using a tag named
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
<!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:
To represent the ordered list, there are five important types of attributes for this tag. As the HTML
This attribute gives the type of numbering to be used in the list.
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