Ordered List in HTML

HTML Ordered List

As the name itself suggests, all the list items are marked with numbers by default in a Numbered List. It is popularly known as HTML Ordered List and hence starts with the <ol> tag. The list items in an HTML Ordered List starts with the <li> tag. An HTML Ordered List can be mainly of five types, depending on the different types of the numbers or letters used for numbering of the list items.

 

TYPE DESCRIPTION VALUES USES
Type “1” Numeric Number 1, 2, 3 Default type. The list items are numbered with numbers.
Type “I” Capital Roman Number I, II, III The list items are numbered with upper case roman numbers.
Type “i” Small Romal Number i, ii, iii The list items are numbered with lower case roman numbers.
Type “A” Capital Alphabet A, B, C The list items are numbered with upper case letters.
Type “a” Small Alphabet a, b, c The list items are numbered with lower case letters.

 
Example: Type “1”

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol>
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation:
In the above example, we created an ordered or numbered list of the default type in HTML containing three items.

Example: Type “I”

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol type="I">
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation:
In the above example, we created an ordered or numbered list of Type “I” in HTML containing three items.

Example: Type “i”

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol type="i">
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation:
In the above example, we created an ordered or numbered list of Type “i” in HTML containing three items.

Example: Type “A”

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol type="A">
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation:
In the above example, we created an ordered or numbered list of Type “A” in HTML containing three items.

Example: Type “a”

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol type="a">
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation:
In the above example, we created an ordered or numbered list of Type “a” in HTML containing three items.

HTML Ordered List or Numbered List using START attribute:
Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol type="a" start="10">
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation:
In the above example, we created an ordered or numbered list of Type “a” in HTML containing three items. Here numbering of the list items started from the 10th letter in the alphabetical order which is “j”.

HTML Ordered List or Numbered List using REVERSED attribute:
The Reversed attribute is a Boolean attribute of HTML ol tag, which is newly added in HTML5 version. As the name suggests, this attribute is used to reverse the numbering of the list items.
Example:

<!DOCTYPE html>
<html>
<body>
<h2>HTML Ordered List or Numbered List</h2>
<ol reversed>
  <li>Name</li>
  <li>Age</li>
  <li>Address</li>
</ol>  
</body>
</html>

Output:




HTML Ordered List or Numbered List

  1. Name
  2. Age
  3. Address

Explanation:
In the above example, we created an ordered or numbered list of the default type in HTML containing three items, but the order of numbering of the list items is reversed using the ‘reversed’ attribute.

Please Share