I was asked by a visitor how he could use letters of the alphabet instead of the usual numbers in his ordered lists (that is, numbered lists, as opposed to those with bullet points) in HTML. You can't actually accomplish this with HTML per se, but it can be done with the help of a bit of CSS. I will also deal with how you can use Roman numerals.
I have tried to write the tutorial so that it is usable by both the non-technical webmaster or blogger as well as the person who knows HTML and CSS (and who merely wants to know the specific CSS property to modify).
Note though that I will assume you know how to access the HTML mode of your web editor, blog or CMS software (whichever you happen to use). That is, you will need to know how to switch your program so that you can enter raw HTML into your web page or blog. This is usually possible, even for blogs, where you are normally insulated from the underlying code. Since the method to do this varies from software to software, you will have to find out how to do this from your program's documentation. I have tutorials on how this can be done for some commonly-used web editors:
Let's take the underlying HTML for a list as an example.
By default, if you don't create a specific set of styles for the web browser to use, it will display it using numbers, like so:
The trick to making the browser use letters of the alphabet is to change the list-style-type
property for the list. Every list has a set of properties that control how it is displayed by the browser.
The aforesaid property tells the browser what to use to number the items in the list.
Let's say that we want to use the small (lowercase) letters of the alphabet to number the items.
One way to do this is to change the list-style-type directly in the <ol> tag.
That is, modify the <ol> part of the code that precedes your list items so that
it now says <ol style="list-style-type: lower-alpha;"> instead of
<ol>.
With the above code, the list becomes:
You can also make the browser use capital (ie, uppercase) letters. To do this, use
upper-alpha instead of lower-alpha for the list-style-type property.
That is, change <ol> to <ol style="list-style-type: upper-alpha;"> instead.
(This section is for those who know some CSS. Feel free to skip it if you wish. If you are a non-technical webmaster or blogger, you already have all the information you need.)
If you want all your ordered lists to be numbered with small letters, you can insert the following into your style sheet.
Alternatively, if you only want certain lists to use small letters, and others the default numerals, give
the lists that need to be numbered with letters a class, and only set the list-style-type property for
members of that class.
With the above code, all lists in the "usefulsites" class will be numbered with small letters.
Similarly, to use Roman numerals for a list, specify lower-roman (for small letters) or
upper-roman (for capital letters) for the list-style-type property.
For example, the code above will cause the list to be displayed as follows:
The ability to use different types of numbering systems for your ordered lists is useful not just to accomodate different tastes, but it also helps when you have lists within lists and need a way to differentiate the sub-lists to avoid reader confusion (like in my article on access keys).
Copyright © 2017-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Use Letters and Roman Numerals in Numbered Lists (HTML/CSS Tutorial)
