HTML Ordered List | Structuring Numbered Content

An HTML Ordered List is used to display a list of items in a specific order. The items are numbered by default, making it ideal for steps, rankings, or any content where sequence matters. Ordered lists are created using the <ol> tag, with each item enclosed in <li> (list item) tags.

Types of Ordered Lists:

Default Numbered List: Uses numbers (1, 2, 3) as the default marker for list items.
Roman Numerals: Uses upper or lower case Roman numerals (I, II, III or i, ii, iii).
Alphabetical List: Uses uppercase or lowercase letters (A, B, C or a, b, c).
Custom Start: Allows starting the numbering from a custom number using the `start` attribute.

How to Create an Ordered List:

1. Use the <ol> tag to start the ordered list.
2. Add each item using <li> tags.
3. Close the list with </ol>.

Example of an Ordered List:

The following example demonstrates a simple ordered list with three items:

Code Example

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Ordered List</title>
    </head>
    <body>
        <h1>Steps to Make Tea</h1>
        <ol>
            <li>Boil water.</li>
            <li>Add tea leaves.</li>
            <li>Pour into a cup and enjoy!</li>
        </ol>
    </body>
</html>

Output

Steps to Make Tea

1.Boil water. 2.Add tea leaves. 3.Pour into a cup and enjoy!

Attributes of the <ol> Tag:

type: Specifies the type of numbering (e.g., `1`, `A`, `a`, `I`, `i`).
start: Defines the starting number for the list.
reversed: Displays the list in reverse order.

Example with Custom Attributes:

This example demonstrates a reversed list starting at 5 with Roman numeral markers:

Code Example

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Ordered List</title>
    </head>
    <body>
    <ol type="I" start="5" reversed>
    <li>Fifth Item</li>
    <li>Fourth Item</li>
    <li>Third Item</li>
</ol>
</body>
</html>

Output

Features of Ordered Lists:

Sequential Display: Items are automatically numbered in the correct order.
Customizable: The `type` attribute allows for different numbering styles.
Accessibility: Makes content easier to understand and follow for users and search engines.

HTML Ordered Lists are an essential tool for presenting sequential information clearly. By utilizing attributes like `type`, `start`, and `reversed`, you can create dynamic and flexible lists to suit your content needs.