search

Home >Web Front-end >HTML Tutorial >HTML Ordered List

HTML Ordered List

WBOY
WBOYOriginal
2024-09-04 16:43:281162browse

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:

  1. Ordered List
  2. Unordered list
  3. 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>

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>

    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

      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:

      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