Why does my Ordered List Show Letters AND Numbers?

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: <li> </li>. 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 <li> and end with </li>. 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.

Facebook

Google

Twitter

Linkedin

Pinterest

Reddit

Email

Print