HTML - <ol> Tag

The <ol> HTML tag defines the Ordered list. It can be numerical, alphabetical, or Roman numerals. It represents an ordered list of items. The default order of the ordered list is numerical.

Following are the global attributes that you can use within the <ol> tag to represent the list of items you like −

  • <reversed> − It is a Boolean attribute that specifies that the list's items are in reverse order.
  • <start> − It is an integer to start counting from for the list of items.
  • <type> − Using this attribute you can set the numbering type.

The type attribute has various numbering formats as follows −

  • type ='a' − for lowercase letters.
  • type ='A' − for uppercase letters.
  • type ='i' − for lowercase roaman numerals.
  • type ='I' − for uppercase roman numerals.
  • type ='1' − for numbers(it is the default numbering type).
The <ul> and <ol> tags both represent the list of items. The difference is with the <ol> tag, the order is meaningful, whereas the order of the <ul> tag is meaningless.

Syntax

Following is the syntax of the <ol> tag −

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

Example

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 Ordered lists</title>
</head>
<body>
   <!--create an ordered list-->
   <ol>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
   </ol>
</body>
</html>

When we run the above code, it will generate an output consisting of the list items displayed on the webpage.

Example

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 Ordered lists</title>
</head>
<body>
   <!--create an ordered list-->
   <ol start=10>
      <li>Neha</li>
      <li>Suresh</li>
      <li>Ramesh</li>
      <li>Vivek</li>
   </ol>
</body>
</html>

On running the above code, the output window will pop up, consisting of list items starting from number 10 displayed on the webpage.

Example

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 Ordered lists</title>
</head>
<body>
   <!--create 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>

When we run the above code, it will generate an output displaying the list items in the lowercase and uppercase letters format on the webpage.

Example

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 Ordered lists</title>
</head>
<body>
   <!--create 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>

On running the above code, it will generate an output displaying the list items in the uppercase and lowercase roman numerals format on the webpage.

Example

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 Ordered lists</title>
</head>
<body>
   <!--create a 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>

When we run the above code, it will generate an output displaying the nested list items on the webpage.

html_tags_reference.htm
Advertisements