HTML Ordered Lists

Ordered lists are a fundamental HTML element used to present information in a specific sequence or order. They are valuable for scenarios where the order of items is essential, such as numbered steps in a tutorial, a list of ranked items, or any situation where a specific order is required. In this HTML tutorial, we will explore the usage of ordered lists with the <ol> (ordered list) and <li> (list item) elements.

Introduction to Ordered Lists

Ordered lists, represented by the <ol> element, are designed to display a list of items in a specified sequence. Unlike unordered lists that use bullet points, ordered lists use numbers, letters, or custom characters to indicate the order. Each item within an ordered list is represented by the <li> element.

Basic Syntax

Here is the basic syntax for creating an ordered list in HTML:

In this example, we have an ordered list containing three list items. Each list item is represented by an <li> element.

List Types

Ordered lists offer different types of numbering for the list items. You can specify the type attribute in the <ol> element to change the numbering style:

  • type="1" (default): Arabic numerals (1, 2, 3, …).
  • type="A": Uppercase letters (A, B, C, …).
  • type="a": Lowercase letters (a, b, c, …).
  • type="I": Uppercase Roman numerals (I, II, III, …).
  • type="i": Lowercase Roman numerals (i, ii, iii, …).

List Types Example

Nested Ordered Lists

Ordered lists can be nested within one another to create hierarchical structures, just like unordered lists. This is useful when you need to represent a hierarchy of content or subcategories.

Nested ordered lists allow you to structure content with levels of importance or sequence.

Code Examples

Here are examples of ordered lists to illustrate different use cases:

Basic Ordered List:

Ordered List with Custom Numbering:

Nested Ordered List:


Ordered lists, created using the <ol> and <li> elements, are valuable tools for presenting information in a specific sequence. Whether you need to outline the steps of a process, list items in a ranked order, or structure content hierarchically, ordered lists provide a clear and organized format. Understanding how to use ordered lists is a fundamental skill in web development, and it ensures that your content is displayed in a logical and sequential manner.