HTML Ordered List

HTML Ordered List is used to group a set of related items in Ordered List. The HTML <ol> tag is used for ordered list. HTML Ordered List is also called as HTML Numbered List.

An ordered list can be numerical or alphabetical. There can be different types of numbered list as below.

  1. Numeric Number (1, 2, 3)
  2. Capital Roman Number (I II III)
  3. Small Romal Number (i ii iii)
  4. Capital Alphabet (A B C)
  5. Small Alphabet (a b c)

There are 5 types of attributes in <ol> tag to display different ordered lists.

Types of attributes in <ol> tag
Type Description
type="1" This is the default type. The list items are numbered with numbers.
type="A" The list items will be numbered with uppercase letters.
type="a" The list items will be numbered with lowercase letters.
type="I" The list items will be numbered with uppercase roman numbers.
type="i" The list items will be numbered with lowercase roman numbers.

 

Syntax for Ordered List or Numbered List (ol) :

<ol type="1">  
 <li>Item 1</li>  
 <li>Item 2</li>  
 <li>Item 3</li>  
 <li>Item 4</li>  
</ol>  

Let's see below example to understand HTML ordered Lists or numbered lists in details.

Example :

<!DOCTYPE html>
<html>
<head>
<title>Learn HTML Lists by aryatechno</title>
</head>
<body>

<p><h3>Display Ordered HTML List for online tutorials in numbers</h3></p>
<p>
<ol type="1">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ol>
</p>


<p><h3>Display Ordered HTML List for online tutorials in upper case letters</h3></p>
<p>
<ol type="A">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ol>
</p>

<p><h3>Display Ordered HTML List for online tutorials in Lower case letters</h3></p>
<p>
<ol type="a">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ol>
</p>

<p><h3>Display Ordered HTML List for online tutorials in upper case roman numbers</h3></p>
<p>
<ol type="I">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ol>
</p>

<p><h3>Display Ordered HTML List for online tutorials in lower case roman numbers</h3></p>
<p>
<ol type="i">
<li>PHP</li>
<li>HTML</li>
<li>MYSQL</li>
<li>CSS</li>
</ol>
</p>

</body>
</html>

Output :

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

31296