How do you construct numbered lists with the tag and customize numbering schemes?

An ordered list is created using the element, containing child elements. Browsers automatically number the items sequentially (1, 2, 3...). You can customize numbering using the 'type' attribute (numbers, letters, roman numerals), 'start' attribute, and 'reversed' attribute.

Topic 18 of 57 3. HTML Lists Interactive Tutorial

HTML Ordered Lists: OL Tag, Attributes, and Examples

11 mins read Last updated: 12 Nov 2026 14,600 views

HTML Editor HTML Cheat Sheet 0.00%

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How do you construct numbered lists with the <ol> tag and customize numbering schemes?

Direct Answer & Overview

An ordered list is created using the

child elements. Browsers automatically number the items sequentially (1, 2, 3...). You can customize numbering using the 'type' attribute (numbers, letters, roman numerals), 'start' attribute, and 'reversed' attribute.

Comprehensive Step-by-Step Concepts

1) Standard Ordered List Syntax: The list container is

. 2) The 'type' Attribute: - type="1": Decimal numbers (1, 2, 3...) [Default] - type="a": Lowercase letters (a, b, c...) - type="A": Uppercase letters (A, B, C...) - type="i": Lowercase Roman numerals (i, ii, iii...) - type="I": Uppercase Roman numerals (I, II, III...) 3) The 'start' Attribute: Specifies the starting number for the list (e.g.,
1. : Individual
2. tags can declare a 'value' attribute to arbitrarily override the current numbering counter mid-list (e.g.,
3. ).

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ordered Lists Demo</title>
</head>
<body>
    <h2>Top 3 Countdown (Reversed)</h2>
    <ol reversed>
        <li>Grand Champion</li>
        <li>Runner-Up First Class</li>
        <li>Bronze Finalist</li>
    </ol>

    <h2>Legal Outline (Roman Numerals starting at IV)</h2>
    <ol type="I" start="4">
        <li>Intellectual Property Rights</li>
        <li>Dispute Resolution Arbitration</li>
        <li>Severability and Jurisdiction</li>
    </ol>

    <h2>Step-by-Step Deployment Procedure</h2>
    <ol type="1">
        <li>Run automated unit tests</li>
        <li>Build production assets</li>
        <li value="10">Verify cloud environment health (Step 10)</li>
        <li>Deploy production release</li>
    </ol>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Use

for sequential processes. Use 'start' and 'reversed' when numbering needs to match a specific non-standard starting counter.

Common Technical & Interview Questions

Q1: When should you prefer an
over an
?

A1: Use

whenever the sequence or chronological order of items is essential to their comprehension, such as recipes, assembly manuals, legal contracts, or ranked lists.

Q2: Is the 'type' attribute on
deprecated in HTML5?

A2: No. While it was deprecated in HTML4 in favor of CSS, HTML5 reinstated the 'type' attribute on

because numbering schemes (letters vs roman numerals vs numbers) carry genuine semantic meaning in legal and academic outlines.

Q3: Can CSS counter properties be used to create multi-level decimal numbering like 1.1, 1.2, 1.3?

A3: Yes! By utilizing CSS 'counter-reset' and 'counter-increment' alongside the '::before' pseudo-element, you can generate complex nested decimal outlines automatically.

All HTML Topics

Previous TopicHTML Unordered Lists: UL Tag, Syntax, and Examples

Next TopicHTML Description Lists: DL, DT, and DD Tags Explained