OL HTML

by

HTML <ol> Tag

As the name itself suggests, all the list items are marked with numbers by default in an Ordered List or 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 start with the <li> tag.

Tag Specific Attributes:

Attribute Value Uses
compact compact It is used to instruct the browser that the list should be displayed smaller than normal. This attribute is not supported in HTML 5.
reversed reversed It is used to instruct that the list should be in descending order.
start number It is used to define the start value of an ordered list.
type 1

A

a

I

i

 It is used to define the kind of marker to be used in the list.

Types of HTML Ordered List:

An HTML Ordered List can be mainly of five types, depending on the different types of numbers or letters used for numbering 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 lowercase 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 lowercase letters.

Example 1: Type “1” Ordered List.

<!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>

Explanation:

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

Example 2: Type “I” Ordered List.

<!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>

Explanation:

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

Example 3: Type “i” Ordered List.

<!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>

Explanation:

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

Example 4: Type “A” Ordered List.

<!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>

Explanation:

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

Example 5: Type “a” Ordered List.

<!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>

Explanation:

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

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

<!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>

Explanation:

In the above example, we are creating 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 alphabetical order which is “j”.

HTML Ordered List or Numbered List using REVERSED attribute:

The Reversed attribute is a Boolean attribute of the HTML <ol> tag, which is newly added in the HTML5 version. As the name suggests, this attribute is used to reverse the numbering of the list items.

Example 7:

<!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>

Explanation:

In the above example, we are creating 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.

Global attributes:

The HTML global attributes are supported by the HTML <ol> tag.

Event attributes:

The HTML event attributes are supported by the HTML <ol> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera, and Safari.