In this lesson, you'll learn how to create ordered (numbered) lists in HTML using the <ol> tag. Ordered lists are perfect for displaying items in a specific sequence, such as steps in a process, rankings, or any content that benefits from numbering.

What Is an HTML Ordered List?

An HTML ordered list is a list where each item is automatically numbered by the browser. This is useful when the order of items matters.

The <ol> tag is used to create ordered lists, and each list item is wrapped in an <li> (list item) tag.

Syntax of the <ol> Tag

The basic syntax for creating an ordered list is as follows:

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

• <ol>: The opening tag for the ordered list.
• <li>: The list item tag used to define each item within the list.
• </ol>: The closing tag for the ordered list.

Attributes of the <ol> Tag

The <ol> tag supports several attributes that allow you to customize the appearance and behavior of your ordered lists:

• type Attribute: Specifies the type of numbering to use.
• reversed Attribute: Reverses the numbering order.
• start Attribute: Specifies the starting number for the list.

Examples of HTML Ordered Lists

Let's explore below practical examples of using the <ol> tag with different attributes.

1. Basic Ordered List: Steps to Create an Account

This example demonstrates a simple ordered list without any additional attributes. The list items are numbered automatically by the browser.

Explanation:

• The <ol> tag creates an ordered list of steps.
• Each <li> tag represents a step in the account creation process.
• The browser automatically numbers each list item.

2. Ordered List with type Attribute

The type attribute allows you to change the numbering style of the ordered list.

Common types include:

Explanation:

• The type="A" attribute changes the numbering to uppercase letters (A, B, C, etc.).
• This is useful for categorizing sections or phases in a project.

3. Ordered List with start Attribute

The start attribute specifies the starting number of the ordered list. This is helpful when you want your list to begin with a number other than 1.

Explanation:

• The start="6" attribute makes the list begin with the number 6.
• This is useful for continuing a list from a previous section without repeating numbers.

4. Reversed Ordered List with reversed Attribute

The reversed attribute displays the ordered list in descending order, starting from a specified number or the default maximum number.

Explanation:

• The reversed attribute reverses the numbering order.
• The start="5" attribute sets the starting number to 5, counting down to 1.
• This creates a countdown effect for event registration.

5. Combined Attributes: type, reversed, and start

This example combines multiple attributes to create a customized ordered list with a specific numbering style, order, and starting point.

Example: Customized Task List

Explanation:

• type="i" changes the numbering to lowercase Roman numerals (i, ii, iii, etc.).
• reversed makes the list count downwards.
• start="5" sets the starting number to 5, resulting in the list numbering as v, iv, iii, ii, i.
• This combination is useful for creating a specific aesthetic or indicating priority.

Understanding how to effectively use ordered lists enhances the structure and clarity of your web content, making it more organized and user-friendly. In the next lesson, we'll explore HTML Unordered Lists, where you'll learn how to create bullet-point lists for items that don't require a specific order.