HTML OL Tag

In HTML, the <ol> stands for Ordered Lists.

• Basically <ol> tag is used to create an ordered list on HTML Web Pages.

• An Ordered List is typically rendered as a Numbered List.

• In an ordered list, the order is meaningful thus it is different from <ul> or unordered list.

• In order to represent list items, use <li> tag inside <ol> tag

• Ordered list items are displayed by preceding numbering and it can be numerals, letters or Roman Numerals or it can be simple bullets too.

• Also, this is a Block-Level Element.

HTML <ol> Tag Syntax and Usage

The <ol> tag requires both opening (start) tag and closing(end) tag.

The basic syntax for the same is given below:

<ol>
....content here
</ol>

HTML <ol> Tag Attributes

The <ol> tag supports both global and event attributes and some of the common attributes are given below:

1. Reversed

This attribute of <ol> tag is used to specify that list item are in reverse order i.e from high to low.

2. Type

This attribute is used to indicate the type of ordering or numbering type.

It has the following values:

'a' : It is used to indicate lowercase Letters.

'A' : It is used to indicate Uppercase Letters.

'i' : It is used to indicate Lowercase Roman Numerals.

'I' : It is used to indicate Uppercase Roman Numerals.

'1' : It is used to indicate numbers and it is a default value of type attribute too.

3. Start

This attribute's value is in integer form.

It is used to specify the start value for numbering individual list items.

Syntax:- < ol start="3">

HTML <ol> Tag Basic Example

Below we have a basic example of <ol> tag:

Example: Using Roman Numeral type

<ol type="i">
  <li>Python</li>
  <li>Java</li>
  <li>JavaScript</li>
</ol> 

i. Python
ii. Java
iii. JavaScript

Nesting Lists example

<ol>
<li>Front-End</li>
<li>Back-End 
<ol type="a">
      <li>Ruby</li>
      <li>PHP</li>
      <li>.net</li>
</ol>
</li>            
<li>Frameworks</li>
</ol>

1. Front-End
2.Back-End
a.Ruby
b.PHP
c..net
3.Frameworks

Default CSS Settings for HTML <ol> Tag

Most of the browsers use default CSS settings for <ol> tag and it is given below:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

Browser Support for HTML <ol> Tag

Following browsers support this attribute:

• Firefox 1+

• Google Chrome 1+

• Internet Explorer 2+

• Safari 1+

• Opera 4+