HTML <ol> Tag

In this article, we will know HTML <ol> Tag, & its implementation through the examples. The <ol> tag is for an ordered list, an ordered list can be numerical or alphabetical. Inside the <ol> tag you have to make a list <li> of items that will follow the order.

Syntax:

<ol>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
</ol>

Accepted attributes:

HTML <ol> compact Attribute: It defines the list should be compacted (compact attribute is not supported HTML5. Use CSS instead.).
HTML <ol> reversed Attribute: It defines that the order will be descending.
HTML <ol> start Attribute: It defines that from which number or alphabet the order will start.
HTML <ol> type Attribute: It defines which type(1, A, a, I, and i) of an order you want in your list numeric, alphabetic, or roman numbers.

Example: In this example, we have created an ordered list of Frontend Technologies using the <ol> tag.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <title>HTML Ordered Lists</title>
</head>
 
<body>
  <h2>Welcome To GeeksforGeeks</h2>
  <ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>React.Js</li>
  </ol>
</body>
 
</html>

Output:

HTML Ordered List

Example: This example explains the HTML Ordered list by specifying the different attribute & their values.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <title>HTML ol tag</title>
</head>
 
<body>
  <h1 style="color:green;">GeeksforGeeks</h1>
  <h3>HTML <ol> tag</h3>
   
<p>reversed attribute</p>
 
 
  <ol reversed>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
  </ol>
 
   
<p>start attribute</p>
 
  <ol start=5>
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
  </ol>
 
   
<p>type attribute</p>
 
  <ol type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
  </ol>
 
</body>
 
</html>