HTML - <ol> Tag

HTML <ol> tag is used to create an ordered list. The default order of the ordered list is numerical.

Ordered-list items are displayed as numbers, that can be in various forms, like a numeric, alphabetic(uppercase or lowercase), or romanic. The order list contains the multiple <li> tags that used to create list items.

Syntax

<ol>.....</ol>

Attribute

HTML ol tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed below.

Attribute	Value	Description
reversed	reversed	Specifies the order lis in reverse order.
start	number	Specify the starting number of order list.
type	1 A a I i	Specify the order type of the order list.

Examples of HTML ol Tag

Bellow examples will illustrate the usage of ol tag. Where, when and how to use ol tag. How to create nested ordered list as well.

Creating an Ordered List

In the following example, we are creating an ordered list to display the related list of items.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
<!-- Creating an Ordered list-->
   <h3>
      List of technologies for Basic Web Development
   </h3>
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

Self Defining Starting Number of order list

Following is another example of the ordered list. Here, we are using the start attribute within the <ol> tag to display the list of items that started the counting number from 10.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <h3>
      List of technologies for Basic Web Development
   </h3>
   <ol start="2">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

Alphabetic Ordered List

In this example, we are using the type attribute within the <ol> tag to sets the numbering type of the list of items in uppercase and lowercase letters format.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <!--type = 'a'-->
   <ol type='a'>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
   </ol>
   <!--type = 'A'-->
   <ol type='A'>
      <li>Red</li>
      <li>Black</li>
      <li>Blue</li>
   </ol>
</body>
</html>

Romanic Ordered List

In this program, we are using the type attribute within the <ol> and giving the value type as ‘I’ and ‘i’ to display the list of items in the lowercase and uppercase Roman numerals format.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Ordered list-->
   <!--type = 'i'-->
   <ol type='i'>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
   <!--type = 'I'-->
   <ol type='I'>
      <li>Java</li>
      <li>PHP</li>
      <li>Python</li>
   </ol>
</body>
</html>

Nested Ordered List

In the following example, we are creating the nested ordered list to display the related items of the ordered list.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML ol Tag</title>
</head>
<body>
   <!-- Creating an Nested Ordered list-->
   <ol start=10>
      <li>Uppercase letters numbering type</li>
      <ol type='A'>
      <li>Mango</li>
      <li>Apple</li>
      </ol>
      <li>Lowercase letters numbering type</li>
      <ol type='a'>
      <li>Red</li>
      <li>Blue</li>
      </ol>
      <li>Lowercase roman numerals type</li>
      <ol type='i'>
      <li>HTML</li>
      <li>CSS</li>
      </ol>
      <li>Uppercase roman numerals type</li>
      <ol type='I'>
      <li>Java</li>
      <li>C++</li>
      </ol>
   </ol>
</body>
</html>

Supported Browsers

Tag
ol	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm