HTML Basics

Lists & Tables

Links & Media

Forms & Layout

HTML Ordered Lists

❮ Previous Next ❯

HTML Ordered Lists: Creating Sequential Content

An HTML Ordered List is created using the <ol> tag to display items in a specific sequence, typically numbered or alphabetically ordered. Each list item is defined using the <li> (list item) tag.

Ordered lists are essential for instructions, rankings, and step-by-step guides. The browser automatically numbers the list, but you can easily customize the style.

Syntax:

<ol>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
    <li>Butter</li>
</ol>

Basic Ordered List Example:

<!DOCTYPE html>
<html>
<body>
    <h2>My To-Do List</h2>
    <ol>
        <li>Go grocery shopping</li>
        <li>Pay utility bills</li>
        <li>Prepare dinner</li>
    </ol>
</body>
</html>

Customizing Ordered Lists with Attributes

You can modify the appearance and behavior of ordered lists using several attributes on the <ol> tag.

1. The type Attribute

The type attribute specifies the kind of marker to use for the list items.

Type Description
type="1" Items are numbered with numbers (default).
type="A" Items are numbered with uppercase letters.
type="a" Items are numbered with lowercase letters.
type="I" Items are numbered with uppercase Roman numerals.
type="i" Items are numbered with lowercase Roman numerals.

Using the `type` Attribute:

<!DOCTYPE html>
<html>
<body>
    <h4>Uppercase Letters (type="A")</h4>
    <ol type="A">
        <li>Apple</li>
        <li>Banana</li>
    </ol>
    <h4>Lowercase Roman (type="i")</h4>
    <ol type="i">
        <li>First item</li>
        <li>Second item</li>
    </ol>
</body>
</html>

2. The reversed Attribute

To create a reverse-ordered (countdown) list, add the boolean reversed attribute to the <ol> tag. This will make the list count down from the highest number.

Reversed List Example:

<!DOCTYPE html>
<html>
<body>
    <h1>Top 3 Movies to Watch</h1>
    <ol reversed>
        <li>The Shawshank Redemption</li>
        <li>The Godfather</li>
        <li>Inception</li>
    </ol>
</body>
</html>

3. The start Attribute

To control the starting number of the list, use the start attribute. This is useful if you need to break a list into multiple parts but want the numbering to continue seamlessly.

Controlling List Count Example:

<!DOCTYPE html>
<html>
<body>
    <h2>List Starting from 5</h2>
    <ol start="5">
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ol>
</body>
</html>

Nested Ordered Lists

You can create sub-lists by placing a new <ol> element inside an <li> tag. This is perfect for creating outlines or hierarchical structures.

Nested List Example:

<!DOCTYPE html>
<html>
<body>
    <h2>Programming Languages & Frameworks</h2>
    <ol>
        <li>
            JavaScript
            <ol type="a">
                <li>React</li>
                <li>Angular</li>
                <li>Vue.js</li>
            </ol>
        </li>
        <li>
            Python
            <ol type="a">
                <li>Django</li>
                <li>Flask</li>
            </ol>
        </li>
    </ol>
</body>
</html>

Exercise

?

Which attribute would you use to make an ordered list count down from 3 to 1?

❮ Previous Next ❯