HTML

How to Use HTML Ordered Lists | Ultimate Guide by Codeezy

HTML Tutorial

HTML Ordered Lists

HTML Ordered Lists

An HTML ordered list is designed to present items in a specific sequence, whether numerical, alphabetical, or Roman numeral. Created using the <ol> tag, this list structure is ideal for displaying information that requires a clear, sequential order.

Table of Contents

  1. Introduction to HTML Ordered Lists
  2. Basic Syntax
  3. Types of HTML Ordered Lists
  4. Control List Counting
  5. Nested Ordered Lists
  6. HTML Ordered Lists – FAQs

Basic Syntax

To create an ordered list, use the following syntax:

				
					<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

In this example, each item within the list is marked with <li>, ensuring they appear in a sequential order.

Types of HTML Ordered Lists

Numbered List

By default, an ordered list displays items with numbers. This format is ideal for steps, rankings, or any content that requires a numerical sequence.

Example:

				
					<!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>

Uppercase Letters

Using the type="A" attribute, you can create an ordered list with uppercase alphabetical enumeration.

Example:

				
					<!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>

Lowercase Letters

The type="a" attribute generates an ordered list with lowercase alphabetical enumeration.

Example:

				
					<!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>

Uppercase Roman Numerals

The type="I" attribute creates an ordered list with uppercase Roman numerals.

Example:

				
					<!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>

Lowercase Roman Numerals

The type="i" attribute produces an ordered list with lowercase Roman numerals.

Example:

				
					<!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>

Controlling List Counting

You can use the start attribute to specify the starting number for your ordered list.

Example:

				
					<!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>

Nested Ordered Lists

To create hierarchical content, you can nest <ol> tags within <li> tags.

Example:

				
					<!DOCTYPE html>
<html>
<head>
    <title>Nested Ordered List</title>
</head>
<body>
    <h2>Nested 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>

HTML Ordered Lists – FAQs

What is an HTML ordered list? An HTML ordered list is a list where items are displayed in a specific sequence, automatically numbered.

How do you create an ordered list in HTML? Use the <ol> tag with nested <li> tags.

What does the <ol> tag represent? The <ol> tag creates an ordered list, typically displaying items with numbers or letters.

How do you specify the type of numbering in an ordered list? Use the type attribute in the <ol> tag to choose between numbers, letters, or Roman numerals.

How do you start an ordered list with a specific number? Use the start attribute in the <ol> tag to set the starting number, e.g., <ol start="5">.

What is the reversed attribute used for in an ordered list? The reversed attribute reverses the order of the list, displaying items in descending order.

Thank You for Visiting Codeezy.org!

We’re thrilled to have you as part of our coding community. Your engagement and support inspire us to continue providing high-quality resources and tools to enhance your web development journey. Whether you’re a beginner or an experienced coder, we hope you found valuable insights and tools here at Codeezy.

Stay connected for more tips, tutorials, and updates to help you code with ease. Thank you for choosing Codeezy.org—your growth as a developer is our motivation!

Happy coding!