Ordered lists (ol)

Hello, students! In this lesson, we will learn about HTML ordered lists.

Ordered lists are used to organize text on a web page.

They are identified by the <ol> tag.

Topics

• What are HTML ordered lists?
• Code examples
• Ordered list styles

What are HTML ordered lists?

Ordered lists are used to organize text on a web page.

They are used to create a list of items that have a specific order.

For example, a list of steps in a process or a set of instructions.

Code examples

Here are some code examples for ordered lists:

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

The browser displays the list as follows:

1. Step 1
2. Step 2
3. Step 3

You can also use <li> elements to create more complex item lists.

<ol>
  <li>Step 1
    <ol>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ol>
  </li>
  <li>Step 2</li>
</ol>

The browser displays the list as follows:

1. Step 1
   1. Subitem 1
   2. Subitem 2
2. Step 2

Ordered list styles

You can use CSS styles to change the appearance of ordered lists.

For example, you can use the list-style-type attribute to change the type of numbering used for list items.

Possible values for the list-style-type attribute are:

• decimal: Decimal numbering
• lower-alpha: Lowercase alphabetical numbering
• upper-alpha: Uppercase alphabetical numbering
• lower-roman: Lowercase Roman numeral numbering
• upper-roman: Uppercase Roman numeral numbering

<ol style="list-style-type: lower-roman;">
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

The browser displays the list as follows:

1. Step 1
2. Step 2
3. Step 3

You can also use the list-style-position attribute to change the position of the numbers.

Possible values for the list-style-position attribute are:

• outside: Numbers positioned outside the text
• inside: Numbers positioned inside the text

<ol style="list-style-type: decimal; list-style-position: inside;">
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

The browser displays the list as follows:

1. Step 1
2. Step 2
3. Step 3

Exercises

• Create an HTML document with an ordered list of instructions for baking a cake.
• Save the document and open it in a browser.

Observe how the browser displays the list.

Good luck!