Open In App
Related Articles

HTML Ordered Lists

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The HTML Ordered list displays the elements in a numbered format. 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>...</li>
<li>...</li>
<li>...</li>
</ol>

HTML Ordered List Type Attribute

TypeDescription
type=”1″This will list the items with numbers (default)
type=”A”This will list the items in uppercase letters.
type=”a”This will list the items in lowercase letters.
type=”I”This will list the items with uppercase Roman numbers.
type=”i”This will list the items with lowercase Roman numbers.

Below are a few examples that demonstrate the use of <ol> tag in HTML.

 

Example 1: This example shows the default type of ordered lists.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML Ordered Lists</title>
</head>
  
<body>
    <h2>Welcome To GeeksforGeeks</h2>
    
    <ol>
        <li>Geeks</li>
        <li>for</li>
        <li>Geeks</li>
    </ol>
</body>
  
</html>

                    

Output: 

Example 2:  This example shows the type=”A” of ordered lists.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML Ordered Lists</title>
</head>
  
<body>
    <h2>Welcome To GeeksforGeeks</h2>
    <ol type="A">
        <li>Geeks</li>
        <li>for</li>
        <li>Geeks</li>
    </ol>
</body>
  
</html>

                    

Output:

Example 3: This example shows the type=”a”  of ordered lists.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML Ordered Lists</title>
</head>
  
<body>
    <h2>Welcome To GeeksforGeeks</h2>
    <ol type="a">
        <li>Geeks</li>
        <li>for</li>
        <li>Geeks</li>
    </ol>
</body>
  
</html>

                    

Output:

Example 4: This example shows the type=”I” of ordered lists.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML Ordered Lists</title>
</head>
  
<body>
    <h2>Welcome To GeeksforGeeks</h2>
    <ol type="I">
        <li>Geeks</li>
        <li>for</li>
        <li>Geeks</li>
    </ol>
</body>
  
</html>

                    

Output:

Example 5: This example shows the type”i” of ordered lists.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML Ordered Lists</title>
</head>
  
<body>
    <h2>Welcome To GeeksforGeeks</h2>
    <ol type="i">
        <li>Geeks</li>
        <li>for</li>
        <li>Geeks</li>
    </ol>
</body>
  
</html>

                    

Output: 

Example 6: This example shows the use of the start attribute in ordered lists.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML Ordered Lists</title>
</head>
  
<body>
    <h2>Welcome To GeeksforGeeks</h2>
    <ol start=5>
        <li>Geeks</li>
        <li>for</li>
        <li>Geeks</li>
    </ol>
</body>
  
</html>

                    

Output:

Example 7: This example shows the nested lists in ordered lists.

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="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
  
</body>
  
</html>

                    

Output:



Last Updated : 02 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads