Previous
Written by: rJTutorial Team | Last Updated:

HTML Ordered List

An HTML ordered list (<ol>) is used to present a sequence of items in a specific order. Unlike unordered lists which use bullets, ordered lists use a numerical or alphabetical sequence to show a clear progression. Use these when the order of items is critical, such as in step-by-step instructions, recipes, or a "Top 10" ranking.

Best Practice: Only use an ordered list if the meaning of the content would change if you rearranged the items. If the sequence doesn't matter, use an <ul> (unordered list) instead.

Creating an Ordered List

Ordered lists are created using the <ol> element as a container. Every individual item within that list must be wrapped in <li> (list item) tags. Browsers will automatically handle the incrementing of numbers for you.

Common Mistake: Placing text or other HTML tags directly inside the <ol> tag without wrapping them in an <li>. Only <li> elements should be direct children of an <ol> or <ul>.

Basic Syntax

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

Output:

  1. First item
  2. Second item
  3. Third item
Developer Tip: You don't need to manually type "1.", "2.", etc. The browser calculates these values. If you delete the second item in your code, the browser will automatically re-number the remaining items.

Types of Numbering

The type attribute in the <ol> tag allows you to specify different types of numbering styles to fit your content's context, such as legal documents or academic outlines.

1. Decimal (default)

Standard Arabic numerals. This is the default behavior if no type is specified.

<ol type="1">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output:

  1. First item
  2. Second item
  3. Third item

2. Uppercase Letters

Commonly used for multiple-choice questions or formal outlines.

<ol type="A">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output: A. First item B. Second item C. Third item

3. Lowercase Letters

<ol type="a">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output: a. First item b. Second item c. Third item

4. Uppercase Roman Numerals

Often seen in the "Preface" of books or for major sections in a legal document.

<ol type="I">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output: I. First item II. Second item III. Third item

5. Lowercase Roman Numerals

<ol type="i">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output: i. First item ii. Second item iii. Third item

Developer Tip: While the type attribute is perfectly valid, modern developers often use the CSS property list-style-type to manage the visual appearance of lists, keeping the design separate from the HTML structure.

Starting Point

The start attribute allows you to specify the starting number of the list. This is extremely useful if you need to break a list into two sections (for example, putting an image or an advertisement in between two parts of a tutorial).

<ol start="5">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output: 5. First item

  1. Second item
  2. Third item
Watch Out: The start attribute always accepts a numeric value (e.g., start="5"), even if your type is set to letters or Roman numerals. To start a list at "E", you would still use start="5".

Reversed Order

The reversed attribute is a boolean attribute that reverses the numbering. It is perfect for "Top 10" countdowns or showing a list of version updates from newest to oldest.

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

Output: 3. First item

  1. Second item
  2. Third item

Nesting Ordered Lists

You can nest ordered lists within other lists to create hierarchical structures, such as a Table of Contents with chapters and sub-sections.

<ol>
  <li>Chapter 1
    <ol>
      <li>Section 1.1</li>
      <li>Section 1.2</li>
    </ol>
  </li>
  <li>Chapter 2
    <ol>
      <li>Section 2.1</li>
      <li>Section 2.2</ol>
    </ol>
  </li>
</ol>

Output:

  1. Chapter 1
    1. Section 1.1
    2. Section 1.2
  2. Chapter 2
    1. Section 2.1
    2. Section 2.2
Watch Out: When nesting, ensure the inner <ol> is inside an <li> tag of the parent list. Beginners often accidentally place the nested list between two <li> tags, which is invalid HTML.

Summary

HTML ordered lists (<ol>) are a powerful tool for presenting sequential data clearly and semantically. By leveraging attributes like type, start, and reversed, you can handle almost any numbered data requirement—from simple "how-to" guides to complex legal numbering systems. Remember to keep your HTML clean by nesting properly and using CSS for purely decorative styling.

Previous