How Can You Make a Numbered List in HTML

In this post, we will explain how to make a numbered list in HTML, which tags are used for it, and the purpose of each tag. Let’s understand this step by step with proper code examples and outputs.

This tutorial will guide you on How Can You Make a Numbered List in HTML in a simple way, so that beginners can easily practice and use it in their own projects.

Tags Used to Create a Numbered List

In HTML, to create a numbered list we use the <ol> and <li> tags.

<ol> → This tag tells the browser that the list is a numbered list.
<li> → The items of the list are written inside this tag. For every item, you need to use a separate <li> tag.

For example, if you want to display three names — Apple, Orange, Grapes — then the code will be like this:


    <ol>
      <li>Apple</li>
      <li>Orange</li>
      <li>Grapes</li>
    </ol>

Output

How can you make a numbered list in HTML

👉 If you want a specific type of numbered list, you need to use the <type> attribute and assign it a value according to the list style you want.

🔹 type Attribute Details

With the <type> attribute, you can change the formatting of the list.

Values:

1 → Default Numbers (1, 2, 3…)
A → Capital Letters (A, B, C…)
a → Small Letters (a, b, c…)
I → Capital Roman Numbers (I, II, III…)
i → Small Roman Numbers (i, ii, iii…)

A → Capital Letters (A, B, C…) When you use type="A", your list items will appear in the sequence A, B, C.


<ol type="A">
  <li>Apple</li>
  <li>Orange</li>
  <li>Grapes</li>
</ol>

(A) Apple
(B) Orange
(C) Grapes

a → Small Letters (a, b, c…) When you use type="a", your list items will appear in the sequence a, b, c.


<ol type="a">
  <li>Apple</li>
  <li>Orange</li>
  <li>Grapes</li>
</ol>

(a) Apple
(b) Orange
(c) Grapes

I → Capital Roman Numbers (I, II, III…) When you use type="I", your list items will be displayed in I, II, III Roman format.


<ol type="I">
  <li>Apple</li>
  <li>Orange</li>
  <li>Grapes</li>
</ol>

(I) Apple
(II) Orange
(III) Grapes

i → Small Roman Numbers (i, ii, iii…) When you use type="i", your list items will appear in i, ii, iii format.


<ol type="i">
  <li>Apple</li>
  <li>Orange</li>
  <li>Grapes</li>
</ol>

(i) Apple
(ii) Orange
(iii) Grapes

Note:

You can use the type attribute to change the formatting of your numbered list. If you still face any difficulty in creating a number list, you can simply copy and paste this code.

FAQ (Frequently Asked Questions)

Q1. Can I create a list using Roman Numbers?

Yes, you can use type="I" or type="i" to create a list with Roman Numbers.

Q2. What is the default list type?

By default, the list always appears in 1, 2, 3… numbering.