Ordered Lists in HTML
HTML HTML Lists
<OL>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
</OL>
First Item
Second Item
Third Item
<OL>
Ordered List List , One pair of tag is allowed.
<LI>
Items of Ordered List, Mulitple pairs allowed. Child of <OL>
Ordered lists are also referred to as Numbered Lists .
Ordered lists can be defined using <OL> ... </OL> tags. The tag <OL> indicates the start of a ordered(numbered) list while </OL> signals the end of the list.
Attributes of <OL> .. </OL> :
Type: This attribute indicates the type of the numbering /listing to be used.
Type Description
Type = 1 Numbered List . 1,2,3 ... Default.
Type = a Lowercase alphabets a, b, c ....
Type = A Uppercase alphabets A,B,C ....
Type = I Uppercase roman numbers I,II, III,IV ....
Type = i Lowercase roman numbers i,ii,iii,iv ....
Type = 1
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL type=1>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
Type = a
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL type=a>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
Type = A
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL type=A>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
Type = I
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL type=I>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
Type = i
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL type=i>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
Using style
We can use list-style-type: to add different types of numbering to list including various languages. Here are some examples , you can try more. Adding Leading zero to decimal numbers.
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL style='list-style-type:decimal-leading-zero'>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
style='list-style-type:lower-greek'
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL style='list-style-type:lower-greek'>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
style='list-style-type:armenian'
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL style='list-style-type:armenian'>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
style='list-style-type:oriya'
First Item
Second Item
Third Item
Fourth Item
Fifth Item
<OL style='list-style-type:oriya'>
<LI>First Item</LI>
<LI>Second Item</LI>
<LI>Third Item</LI>
<LI>Fourth Item</LI>
<LI>Fifth Item</LI>
</OL>
Ordered list with style
Demo of HTML list with style →
<html>
<head>
<title>HTML List demo with style </title>
<META NAME="DESCRIPTION" CONTENT="HTML List demo style ">
<META NAME="KEYWORDS" CONTENT="HTML list demo style ">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<style>
ol {
list-style-type: upper-roman;
background:lightgreen;
}
ul {
list-style-type: square;
background:yellow;
}
li {
font-size: 1.2em;
color: #333;
padding-left:5px;
}
ul,ol,h2 {
margin-left: 25px;
width:250px;
}</style>
</head>
<body>
<h2>Unordered List </h2>
<ul>
<li>PHP</li>
<li>JSP</li>
<li>ASP</li>
<li>JavaScript</li>
</ul>
<h2>Ordered List</h2>
<OL start="4">
<li>Ronald </li>
<li>Rajiv</li>
<li>Alex </li>
<li>Smith </li>
</OL>
</body>
</html>
← HTML List
Unordered List →
Definition List in HTML →
This article is written by plus2net.com team.
plus2net.com
Ndungu Thairu Wairubi 25-07-2015
very well elaborated article,easy to understand thank you guys.....