Prev Next

Ordered Lists

Ordered lists (<ol>) present items in a specific order, numbering them by default. They are useful for step-by-step instructions, rankings, or any scenario where sequence matters.

Key Topics

Basic OL Usage

Example: A simple ordered list showing default numbering.

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

Custom Numbering Styles

Example: Using list-style-type in CSS to change numbering style (e.g., roman numerals).

<style>
ol {
    list-style-type: upper-roman;
}
</style>

OL Example

This example shows an ordered list with custom numbering style. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Custom OL</title>
    <style>
        ol {
            list-style-type: upper-roman;
        }
    </style>
</head>
<body>
    <h1>Instructions</h1>
    <ol>
        <li>Mix Ingredients</li>
        <li>Bake for 30 minutes</li>
        <li>Cool before serving</li>
    </ol>
</body>
</html>

Explanation: Using roman numerals adds a more formal or structured appearance to your steps, making the sequence stand out.

Key Takeaways

  • Ordered lists emphasize sequence or priority.
  • Default numbering can be customized with CSS.
  • Use OL for instructions, rankings, or processes.
  • Numbered lists help users follow steps in the correct order.
  • Styling OLs can improve aesthetics and user guidance.
Prev Next