HTML Ordered List Tricks Tutorial

During a recent Web Fundamentals training, I was showing students how to make lists of content. If you've written any HTML before, you've likely used the <ul> tag to create an unordered bullet list.

After showing the class how to do this, I showed them the less frequently used <ol> tag, which creates an ordered list, like so:

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

By default, numbers are used, listing these off as 1, 2, 3, etc...

One student who was new to HTML asked: "Can we use letters instead of numbers?" I first started writing HTML in 2003, and in that entire time, that had never occurred to me!

Ordered List Type Attribute

While on the webinar, I said, "Hmm, I'm not sure, but let's google it" and we wound up on the W3Schools.com HTML <ol> type Attribute page. And it turns out, yes, there are different options instead of just numbers. All we need to do is add the type attribute on our <ol> tag and say what we want.

As shown above, if we don't add a type attribute, the default is just decimal numbers. Let's look at two other options.

Alphabetical

We can display our list using letters by using <ol type="A">. For example:

<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

You can also display this using lowercase letters with <ol type="a">:

<ol type="a">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

What If I Have a Lot Of Items?

If you have a list that has more than 26 items in it, you probably aren't going to be using an alphabetical list type. But I was curious, what would happen if I had 27 items in my list? Would it just start over again?

What happens is that it then begins to display two letters, starting with AA, then AB, AC, AD, etc...

Roman Numerals

The other option is to use Roman numerals, which also has an upper- and lowercase option. For example, <ol type="I"> produces:

<ol type="I">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

And lowercase <ol type="i">:

<ol type="i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Combining Multiple Types in Nested Lists

One possible case for using different list types could be subcategories. Imagine yourself listing chapters in a book and then decide to use the uppercase Roman numeral type, like so:

<ol type="I">
  <li>Introduction</li>
  <li>First Principles</li>
  <li>Second Principles</li>
</ol>

We can create another ordered list that is nested under each chapter <li> that has sections within it, but we want to use the lowercase Roman numeral style instead.

<ol type="I">
  <li>Introduction</li>
  <li>First Principles
    <ol type="i">
      <li>First Section</li>
      <li>Second Section</li>
      <li>Third Section</li>
    </ol>
  </li>
  <li>Second Principles</li>
</ol>

Start Attribute

If you are using an ordered list with decimals, this is good to know: you can start your numbering at any number you'd like. In the video above, I show an example of a cooking recipe and halfway through listing instructions in a numeric list, I want to break and describe something.

If I create a new <ol> list, it restarts the numbering from 1. To continue the ordering, use the start attribute on your <ol> tag, like this:

<ol start="4">
  <li>Step 4</li>
  <li>Step 5</li>
</ol>

I have tried using the start attribute on <ol> tags that use alphabetical and Roman numerals, but it appears to only work on the default numbers type.

Conclusion

Now that you know the various ordered list options—and it's tempting to use a new tool when you've found it—we should know when is the appropriate context for each type.

This User Experience StackExchange thread has some good insights when to use which.

The general rule of thumb is that if you're making a list of content and the order does not matter, use an unordered <ul> list. If the order of items does matter, such as directions in a recipe, use an ordered <ol> list.

Blog