Home > Article > Web Front-end > HTML Ordered List
HTML Ordered List
- WBOYOriginal
- 2024-09-04 16:43:281096browse
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
- element and ends with
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
<!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
- 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:
- 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
1. The Type attribute
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