HTML ordered list with numbers and letters

A client recently asked me to help her with an HTML ordered list that was showing letters and a random number:

1. A. Lorem ipsum dolor sit amet. B. Pellentesque sit amet molestie dolor.

   C. Pellentesque quis molestie orci.

When I took a look at the source code, I saw two errors that were causing the problem. So let’s dig in to the HTML to find out what the problems are and how to fix them.

Problem 1: Random number showing up in an ordered list.

Take a look at the source code for the broken list:

As you can see, A, B, and C have been typed in. Any time you hard code numbers or letters into an HTML ordered list you will have bad results.

Problem 1 Solution

Don’t hard-code letters and numbers into lists. Use properly formed HTML ordered lists, then use CSS to designate the list style.

By default, ordered lists use numbers. If you want something different, such as letters or Roman numerals, you need to use a list style.

In this example, the style creates a list using uppercase letters instead of numbers:

After we remove the hard-coded letters, our list now looks like this:

We still have a problem. A is showing, but where are B and C?

Problem 2: Only the first list item is lettered.

Here is what the source code looks like after removing the hard-coded letters and adding the style:

Do you see the code error? Each list item is supposed to be set off with list item tags:

. However, looking at the the list code above, you can see there is only one, long list item. That’s why you only see the A, and not A, B, C.

If you don’t press Enter after after each list item and instead press Ctrl+Enter, WordPress does not create the closing tag or an opening tag on the next line.

Problem 2 Solution

If working in the code, start each list item with

and end with

. If you are working in the visual editor, press Enter at the end of each list item so WordPress will create the opening and closing tags for you.

Here is the corrected code to create the list:

And here is how it looks on the page:

1. Lorem ipsum dolor sit amet.
2. Pellentesque sit amet molestie dolor.
3. Pellentesque quis molestie orci.

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

tag to create an unordered bullet list.  

After showing the class how to do this, I showed them the less frequently used

tag, which creates an ordered list, like so:  
1. Item 1
2. Item 2
3. Item 3

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

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

. For example:  
1. Item 1
2. Item 2
3. Item 3

You can also display this using lowercase letters with

:  
1. Item 1
2. Item 2
3. Item 3

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,

produces:  
1. Item 1
2. Item 2
3. Item 3

And lowercase

:  
1. Item 1
2. Item 2
3. Item 3

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:  

1. Introduction
2. First Principles
3. Second Principles

We can create another ordered list that is nested under each chapter

1. that has sections within it, but we want to use the lowercase Roman numeral style instead.  
   1. Introduction
   2. First Principles
      1. First Section
      2. Second Section
      3. Third Section
   3. Second Principles

   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

   list, it restarts the numbering from 1. To continue the ordering, use the start attribute on your
   tag, like this:  
   1. Step 4
   2. Step 5

   I have tried using the start attribute on

   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

   list. If the order of items does matter, such as directions in a recipe, use an ordered
   list.   

   To get more in-depth web development training, check out our training page or sign-up for a tutorial.     

   HTML ordered lists

   use normal numbers by default but it’s also possible to use lower or upper case letters [i.e. a b c and A B C] and roman numbers in upper or lower case [i.e. i ii iii and I I III] by using the "type" attribute.

   The default – normal Arabic numbers

   Here’s an example of a default ordered list:

    And the HTML behind it:

   1. Apples
   2. Bananas
   3. Oranges

   Lower and upper case letters

   To make the ordered list show letters instead of numbers, specify type="A" for uppercase and type="a" for lowercase letters in the

   element. Here’s an example of an ordered list using uppercase letters:

   And the HTML behind it:

   1. Apples
   2. Bananas
   3. Oranges

   Lower and upper case Roman numbers

   To use Roman numbers instead, specify type="I" for uppercase Roman numbers [e.g. I II III IV V etc] and type="i" for lowercase Roman numbers [e.g. i ii iii iv v]. Here’s an example of an ordered list using lowercase Roman numbers:

   And the HTML behind it:

   1. Apples
   2. Bananas
   3. Oranges

   Combining them together

   Let’s say you want to have a table of contents with numbers for the main items and then lower case letters for the subitems. Here’s an example:

   1. Fruit
   2. Vegetables

   And the HTML behind it:

   1. Fruit    
             
      1. Apples
             
      2. Bananas
              
      3. Oranges
         
         
      
   2. Vegetables    
             
      1. Carrots
              
      2. Lettuce
             
      3. Cucumbers
         
         

   Starting with a number other than 1

   My next HTML post looks at how to start an HTML ordered list with a number other than 1.

   Video liên quan