HTML - <ol> Tag

Quiz

Introduction to <ol> Tag

The HTML <ol> tag is used to create an ordered list of items, typically represented by numbers, letters or Roman numerals. Each item in the list is enclosed within the <li> tags, that define individual list elements.

The ordered lists are useful for displaying sequential information, such as steps in process, rankings. By default, the <ol> tag renders the items with numbers, they can also be customized using the type attribute.

Syntax

Following is the syntax of HTML <ol> tag −

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

Attributes

HTML ol tag supports Global and Event attributes of HTML. It also 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.

Example : Simple Ordered List

Let's look at the following example, where we are going to consider the basic usage of the <ol> tag.

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

Example : Using with Start Attribute

Consider the following example, where we are going to use the start attribute along with the <ol> tag.

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

Example : Using with Type Attribute

In the following example, we are going to use the type attribute along with the <ol> tag.

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

Example : Reversed Ordered List

Following is the example, where we are going to display the list in the reverse order.

<!DOCTYPE html>
<html>
    <style>
        body{
            font-family:verdana;
            color:#a569bd;
        }
    </style>
<body>
<ol reversed>
  <li>Third Place</li>
  <li>Second Place</li>
  <li>First Place</li>
</ol>
</body>
</html>

Supported Browsers

Tag
ol	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page