How do you start an ordered list from an alphabet in HTML?

HTML <ol> type Attribute

❮ HTML <ol> tag

Table of Contents Show

HTML <ol> type Attribute
HTML Ordered Lists
<ol>: The Ordered List element
The default – normal Arabic numbers
Ordered List Type Attribute
Alphabetical
What If I Have a Lot Of Items?
HTML Ordered List | HTML Numbered List
Create an ordered list with capital letters and starting at point 4 in HTML and CSS
Description

Example

An ordered list with uppercase roman numbers:

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Try it Yourself »

More "Try it Yourself" examples below.

HTML Ordered Lists

❮ Previous Next ❯

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.

<ol>: The Ordered List element

The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.

Content categories	Flow content, and if the <ol> element's children include at least one <li> element, palpable content.
Permitted content	Zero or more <li>, <script> and <template> elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	list
Permitted ARIA roles	directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree
DOM interface	HTMLOListElement

The default – normal Arabic numbers

Here’s an example of a default ordered list:

Apples
Bananas
Oranges

And the HTML behind it:

<ol> <li>Apples</li> <li>Bananas</li> <li>Oranges</li> </ol>

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 Attributepage. 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:

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

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

HTML Ordered List | HTML Numbered List

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:

Numeric Number (1, 2, 3)
Capital Roman Number (I II III)
Small Romal Number (i ii iii)
Capital Alphabet (A B C)
Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type	Description
Type "1"	This is the default type. In this type, the list items are numbered with numbers.
Type "I"	In this type, the list items are numbered with upper case roman numbers.
Type "i"	In this type, the list items are numbered with lower case roman numbers.
Type "A"	In this type, the list items are numbered with upper case letters.
Type "a"	In this type, the list items are numbered with lower case letters.

Create an ordered list with capital letters and starting at point 4 in HTML and CSS

Description

The following code shows how to create an ordered list with capital letters and starting at point 4.

Example

<html> <body> <p>Here is an ordered list using capital letters and starting at point 4, which is a letter D:</p> <ol type="A" start="4"> <li>Point number one</li> <li>Point number two</li> <li>Point number three</li> </ol> </body> </html>

Click to view the demo

The code above generates the following result.

«Previous