An ordered HTML list or numbered list that displays items in a numbered format. The ol HTML tag is used for sorted lists. Ordered lists allow you to view items in numeric, alphabetical, or other formats. There are several types of numbered lists.
  1. Numeric(123...).
  2. Capital Roman number(I, II...).
  3. Small Roman Number (i, ii...).
  4. Capital Alphabet (A, B..).
  5. Small Alphabet (a,b..).











Example: HTML Ordered list with type "1"
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol type="1">
	<li>Youtube</li>
	<li>Facebook</li>
	<li>Twitter</li>
</ol>
</body>
</html>
Output 
  1. Youtube
  2. Facebook
  3. Twitter
Example: HTML Ordered list with type "I"
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol type="I">
	<li>Youtube</li>
	<li>Facebook</li>
	<li>Twitter</li>
</ol>
</body>
</html>
Output





Example: HTML Ordered list with type "i" 
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol type="i">
	<li>Youtube</li>
	<li>Facebook</li>
	<li>Twitter</li>
</ol>
</body>
</html>
Output





Example: HTML Ordered list with type "A"
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol type="A">
	<li>Youtube</li>
	<li>Facebook</li>
	<li>Twitter</li>
</ol>
</body>
</html>

Output





Example: HTML Ordered list with type "a"
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol type="a">
	<li>Youtube</li>
	<li>Facebook</li>
	<li>Twitter</li>
</ol>
</body>
</html>

Output







Nested Ordered List
Example: Nested List with the same type
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol type="1">
	<li>Youtube
    <ol type="1">
    	<li>Brand Account</li>
    	<li>Personal Account</li>
    </ol>
	</li>
	<li>Facebook
   <ol type="1">
   	<li>Facebook page</li>
   	<li>facbook account</li>
   </ol>
	</li>
	<li>Twitter</li>
</ol>
</body>
</html>

Output











Example: Nested List with the different type
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol type="1">
	<li>Youtube
    <ol type="A">
    	<li>Brand Account</li>
    	<li>Personal Account</li>
    </ol>
	</li>
	<li>Facebook
   <ol type="a">
   	<li>Facebook page</li>
   	<li>facbook account</li>
   </ol>
	</li>
	<li>Twitter</li>
</ol>
</body>
</html>

Output
Start Attribute
The start attribute is used to define from where to start the list item. The start attribute is used only in the <ol> tag.
Syntax:
<ol type="value" start="value">

Example: Ol type"1" Start from "3"
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol type="1" start="3">
	<li>Youtube</li>
	<li>Facebook</li>
	<li>Twitter</li>
</ol>
</body>
</html>

Output










Reversed Attribute
If you want to list items in reverse or descending order you can use the reverse attribute. A reversed attribute is used to list items in the reverse way or descending order.
Example: Reversed Attribute
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<ol reversed="1">
	<li>Youtube</li>
	<li>Facebook</li>
	<li>Twitter</li>
</ol>
</body>
</html>

Output









Watch on You Tube