HTML Ordered List-HTML Tutorial-php.cn

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 tag.

HTML Ordered List

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>

Copy after login

Output:

This will give you the result like

HTML Ordered List

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

. It is just an internal variable of CSS to enable counting functions.

<!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>

Copy after login

Output:
HTML Ordered List

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

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>

Copy after login

Output:

HTML Ordered List

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