HTML Ordered Lists

The <ol> tag is used to create a list. The <li> tag is used to define an item in the list. List items are marked with numbers and letters. The type of items in the order list can be determined. The <ol> tag represents an ordered list.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>     
</body>
</html>

Try it Yourself

How is the order list type set ?

The type that is set within the order list <ol> tag. The list is made in this format.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="A"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>     
</body>
</html>

Try it Yourself

Numbers Type

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="1"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>     
</body>
</html>

Try it Yourself

letters Type

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="A"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>
   <ol type="a"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>
   <ol type="I"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol> 
   <ol type="i"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>    
</body>
</html>

Try it Yourself

Ordered List Control

Any ordered list starts counting from 1. You can control the countdown with the help of the start attribute. The number of the position from which you want to start the ordered list type should be given in the start attribute.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol type="1" start="3"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>
    <ol type="A" start="3"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>
   <ol type="a" start="3"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>
   <ol type="I" start="3"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol> 
   <ol type="i" start="3"> 
        <li> HTML </li>
        <li> CSS </li>
        <li> JAVASCRIPT </li>
   </ol>    
</body>
</html>

Try it Yourself