HTML Tutorial

HTML Ordered Lists

In HTML, ordered lists are used to represent information in a specific order, typically numbered. This tutorial will guide you through creating ordered lists step-by-step.

Understanding the <ol> Tag

The <ol> tag is used to define an ordered list in HTML. It stands for “ordered list” and is the container for list items.

Inside the <ol> tag, you use <li> (list item) tags to define each item in the ordered list.

Example:

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
Try It Yourself

Styling Ordered Lists with Attributes

You can use attributes with the <ol> tag to modify the appearance or behavior of the ordered list. Common attributes include type, start, and reversed.

type

Specifies the numbering type (e.g., “1” for numbers, “A” for uppercase letters, “a” for lowercase letters, “I” for uppercase Roman numerals, “i” for lowercase Roman numerals).

Example:

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

start

Specifies the starting value of the ordered list.

Example:

<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ol>
Try It Yourself

reversed

Reverses the order of the list items.

Example:

<ol reversed>
  <li>Third item</li>
  <li>Second item</li>
  <li>First item</li>
</ol>
Try It Yourself

Nesting Ordered Lists

You can also nest ordered lists within other ordered lists to create a hierarchical structure.

Example:

<ol>
  <li>Main item 1</li>
  <li>Main item 2
    <ol>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ol>
  </li>
  <li>Main item 3</li>
</ol>
Try It Yourself

Summary

To summarize, creating ordered lists in HTML involves using the <ol> tag to define the list and <li> tags for each item. You can further customize the appearance and structure using attributes and nesting. Experiment with different attribute values to achieve the desired look for your ordered lists.