HTML Ordered Lists - GeeksforGeeks

HTML ordered lists use the <ol> tag to present items in a defined sequence, ensuring clear and structured display of step-based or ranked content.

Uses <ol> to create a list with a specific order or sequence.
Each item is defined using the <li> tag.
Items are automatically numbered or lettered by the browser.
Numbering style can be customized using attributes or CSS.
Commonly used for instructions, steps, and rankings.

index.html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>My To-Do List</h2>
<!--Driver Code Ends-->

    <ol>
        <li>Go grocery shopping</li>
        <li>Pay utility bills</li>
        <li>Prepare dinner</li>
    </ol>

<!--Driver Code Starts-->
</body>
</html>

<!--Driver Code Ends-->

Syntax

<ol>
    <li>Milks</li>
    <li>Eggs</li>
    <li>Breads</li>
    <li>Butter</li>
</ol>

Different Type Attributes in HTML Ordered List

The type attribute of <ol> tag specifies the order we want to create.

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.

1. Numbered Ordered List

To create an ordered list in HTML with numerical markers, which is the default behavior for ordered lists, you simply use the <ol> (ordered list) tag without specifying a type attribute.

Example: Implementation of a default ordered list where items are displayed in numeric sequence.

index.html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>Ordered List with Numbers</h2>
<!--Driver Code Ends-->

    <ol>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Java</li>
        <li>C++</li>
        <li>C#</li>
    </ol>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

2. Uppercase Letters Ordered List

To create an ordered list in HTML that uses uppercase letters for the list markers, you can use the type attribute on the <ol> tag and set it to "A".

Example: Implementation of an ordered list using the type="A" attribute to display items in uppercase alphabetical order.

index.html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>Uppercase Letters Ordered List</h2>
<!--Driver Code Ends-->

    <ol type="A">
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
        <li>Date</li>
    </ol>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

3. Lowercase Letters Ordered List

To create an ordered list in HTML that uses lowercase letters for the list markers, you can use the type attribute on the <ol> tag and set it to "a".

Example: Implementation of an ordered list using the type="a" attribute to display items in lowercase alphabetical order.

index.html

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>Lowercase Letters Ordered List</h2>
<!--Driver Code Ends-->

    <ol type="a">
        <li>RCB</li>
        <li>CSK</li>
        <li>DC</li>
        <li>MI</li>
    </ol>