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: Show
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 SolutionDon’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: 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 SolutionIf working in the code, start each list item with Here is the corrected code to create the list: And here is how it looks on the page:
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
After showing the class how to do this, I showed them the less frequently used
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 AttributeWhile on the webinar, I said, "Hmm, I'm not sure, but let's google it" and we wound up on the W3Schools.com HTML
As shown above, if we don't add a type attribute, the default is just decimal numbers. Let's look at two other options. AlphabeticalWe can display our list using letters by using
You can also display this using lowercase letters with
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 NumeralsThe other option is to use Roman numerals, which also has an upper- and lowercase option. For example,
And lowercase
Combining Multiple Types in Nested ListsOne 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: We can create another ordered list that is nested under each chapter |