Previous

HTML Ordered List

An HTML ordered list (<ol>) is used to present a sequence of items in a specific order. Each item in the list is numbered automatically.

Creating an Ordered List

Ordered lists are created using the <ol> element, with each list item enclosed within <li> tags.

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

Types of Numbering

The type attribute in the <ol> tag allows you to specify different types of numbering.

1. Decimal (default)

<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

<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

<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

Starting Point

The start attribute allows you to specify the starting number of the list.

<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

Reversed Order

The reversed attribute reverses the numbering of the list items.

<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.

<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</li>
    </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

Summary

HTML ordered lists (<ol>) are used to present items in a specific sequence. They can be customized using attributes like type, start, and reversed. Ordered lists can also be nested to create complex, hierarchical structures. Understanding how to use these lists effectively is essential for creating well-structured and readable web content.

Previous