HTML Ordered Lists - Coding

HTML Ordered List is created by the HTML <ol> tag, to display elements in an ordered form, either numerical or alphabetical. Within the <ol> tag, list items <li> are used to define the items in sequential order.

Syntax:

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

Ordered List Type Attribute with Value

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

Type	Descriptions
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.

Types of HTML Ordered Lists

Table of Content

Number List
Uppercase Letters
Lowercase Letters
Uppercase Roman Numbers
Lowercase Roman Numbers
Control List Counting
Nested Ordered Lists

Number List

HTML Numbered Lists <ol> tag creates an ordered list. Each item is listed sequentially, typically denoted by numbers.

Example: In this example we demonstrates an ordered list (<ol>) with five programming languages listed sequentially.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Numbered List Example</title>
</head>

<body>
    <h2>Ordered List with Numbers</h2>
    <ol>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Java</li>
        <li>C++</li>
        <li>C#</li>
    </ol>
</body>

</html>

Output:

HTML Ordered number list Example Output

Uppercase Letters

HTML Uppercase Letters Utilize the “type” attribute within the <ol> tag, set to “A” to generate an ordered list with uppercase alphabetical enumeration.

Example: In this example we displays an ordered list with uppercase letters (A, B, C, etc.) using the “type” attribute within the <ol> tag.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Uppercase Letters Ordered List
    </title>
</head>

<body>
    <h2>Uppercase Letters Ordered List</h2>
    <ol type="A">
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
        <li>Date</li>
    </ol>
</body>

</html>

Output:

HTML Uppercase Ordered list example Output

Lowercase Letters

HTML Lowercase Letters Utilize the “type” attribute within the <ol> tag, set to “a” to create an ordered list with lowercase alphabetical numbering.

Example: In this example we are showing an ordered list with lowercase letters (a, b, c, d, etc.) using the “type” attribute within the <ol> tag, listing cricket teams.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Lowercase Letters Ordered List
    </title>
</head>

<body>
    <h2>Lowercase Letters Ordered List</h2>
    <ol type="a">
        <li>RCB</li>
        <li>CSK</li>
        <li>DC</li>
        <li>MI</li>
    </ol>
</body>

</html>

Output:

Lowercase Letters Ordered list Example Output

Uppercase Roman Numbers

HTML Uppercase Roman Numbers is set by the “type” attribute within the <ol> tag to “I” for an ordered list with uppercase Roman numeral enumeration.

Example: In this example we displays an ordered list with uppercase Roman numerals (I, II, III, IV) as the numbering, listing four items sequentially.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Uppercase Roman Numbers Ordered List
    </title>
</head>

<body>
    <h2>
        Uppercase Roman Numbers Ordered List
    </h2>
    <ol type="I">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
        <li>Fourth item</li>
    </ol>
</body>

</html>

Output:

Uppercase Roman Numbers Ordered List Example Output

Lowercase Roman Numbers

HTML Lowercase Roman Numbers is use the “type” attribute within the <ol> tag, set to “i” for an ordered list with lowercase Roman numeral enumeration.

Example: In this example we displays an ordered list with lowercase Roman numerals (i, ii, iii, iv, etc.), utilizing the “type” attribute within the <ol> tag.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Lowercase Roman Numbers Ordered List
    </title>
</head>

<body>
    <h2>
        Lowercase Roman Numbers Ordered List
    </h2>
    <ol type="i">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
        <li>Fourth item</li>
    </ol>
</body>

</html>

Output:

Lowercase Roman Numbers Ordered List Example Output

Control List Counting

HTML Control List Counting we use the “start” attribute within the <ol> tag to specify the starting number for ordered lists, customizing counting.

Example: In this example we showcases an ordered list starting from the number 5, controlled by the “start” attribute within the <ol> tag, customizing list counting.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Control List Counting</title>
</head>

<body>
    <h2>Control List Counting</h2>
    <ol start="5">
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
    </ol>
</body>

</html>

Output:

Control List Counting Ordered list

Nested Ordered Lists

HTML Nested Ordered Lists use <ol> within <li> tags to create sublists, enhancing organization and structure for hierarchical content presentation.

Example: In this example we are creating nested ordered list, listing programming languages with their respective frameworks as subitems for enhanced organization.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Nasted Ordered List</title>
</head>

<body>
    <h2>Nasted Ordered List</h2>
    <ol>
        <li>
            JavaScript
            <ol>
                <li>React</li>
                <li>Angular</li>
                <li>Vue.js</li>
            </ol>
        </li>
        <li>
            Python
            <ol>
                <li>Django</li>
                <li>Flask</li>
                <li>Pyramid</li>
            </ol>
        </li>
    </ol>
</body>

</html>

Output:

Nasted Ordered List

HTML Ordered Lists – FAQs

What is an HTML ordered list?

An HTML ordered list is a list of items that are displayed in a specific sequence, each item numbered automatically.

How to create an ordered list in HTML?

Use the <ol> tag with nested <li> (list item) tags to create an ordered list.

What does the <ol> tag represent?

The <ol> tag represents an ordered list, which typically displays items with numbers or letters.

How to specify the type of numbering in an ordered list?

Use the type attribute in the <ol> tag to specify the numbering type (e.g., 1, A, a, I, i).

How to start an ordered list with a specific number?

Use the start attribute in the <ol> tag to set the starting number. Example: <ol start=”5″>

What is the reversed attribute used for in an ordered list?

The reversed attribute reverses the order of the list, making it count down instead of up.

Elevate your coding journey with a Premium subscription. Benefit from ad-free learning, unlimited article summaries, an AI bot, access to 35+ courses, and more-available only with GeeksforGeeks Premium! Explore now!

Reffered: https://www.geeksforgeeks.org

HTML

Related
HTML Unordered Lists
HTML Description Lists
How to Set Checkboxes Readonly in HTML ?
HTML Vs CMS - Which is Right for Your Website ?
Getting Started with HTML Coding

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9