HTML Lists

An ordered list represents a collection in which sequence, ranking or numbering matters.

Use ol for the list and li for each item.

Basic Syntax

<ol>
    <li>Install a code editor</li>
    <li>Create an HTML file</li>
    <li>Write your markup</li>
    <li>Open the file in a browser</li>
</ol>

The browser generally displays the items with sequential numbers.

Example: Registration Process

<h2>How to Register</h2>

<ol>
    <li>Open the registration page.</li>
    <li>Enter your personal information.</li>
    <li>Review the information.</li>
    <li>Submit the form.</li>
</ol>

Ordered lists are suitable for:

• Step-by-step instructions.
• Rankings and ordered results.
• Procedures and workflows.
• Numbered recommendations where order matters.
• Sequential tasks in a tutorial.

5. Ordered-List type Attribute

The type attribute on ol controls the numbering style. It changes the marker format, not the semantic purpose of the list.

Common Values

Example

<h3>Uppercase Letters</h3>
<ol type="A">
    <li>Introduction</li>
    <li>Fundamentals</li>
    <li>Advanced topics</li>
</ol>

<h3>Lowercase Roman Numerals</h3>
<ol type="i">
    <li>Planning</li>
    <li>Implementation</li>
    <li>Testing</li>
</ol>

Use these values when a specific numbering convention is meaningful. For purely visual changes, CSS list styling is usually more flexible.

6. The start Attribute

The start attribute specifies the initial ordinal value for an ordered list.

Example

<ol start="5">
    <li>Fifth item</li>
    <li>Sixth item</li>
    <li>Seventh item</li>
</ol>

The displayed numbering begins at 5 and continues with 6 and 7.

Example: Continuing a Numbered Procedure

<h2>Additional Steps</h2>

<ol start="4">
    <li>Test the page</li>
    <li>Check accessibility</li>
    <li>Publish the website</li>
</ol>

The start attribute accepts an integer. It can be used with different numbering styles, including letters and Roman numerals, although the supplied value is an integer rather than a letter.