Search this site...

Different item labels for numbered list

By default, numbered list uses Arabic numerals such as 1, 2, 3, 4, etc. This default listing item label can be easily changed with the addition of the type attribute to the <ol> tag. There are five different possible listing item labels for a numbered list:

  1. Arabic numerals (i.e., 1, 2, 3, 4, etc)
  2. UPPERCASE letters (i.e., A, B, C, D, etc)
  3. lowercase letters (i.e., a, b, c, d, etc)
  4. UPPERCASE roman numerals (i.e., I, II, III, IV, etc)
  5. lowercase roman numerals (i.e., i, ii, iii, iv, etc)

Table 1 shows the possible values for the type attribute and their effect to the numbered list.

Table 1 numbered list attribute appearance setting
Attribute Purpose
type="1" Specifies use of Arabic numerals. This is the default.
type="A" Specifies use of uppercase letters
type="a" Specifies use of lowercase letters
type="I" Specifies use of Uppercase Roman numerals
type="i" Specifies use of lowercase Roman numerals

Table 2 shows the scripting code for each of the type attribute possible value and its output.

Table 2 using the type attribute to change numbered list appearance
Type Code Output

Arabic numerals (default)

 <ol type="1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3

Uppercase letters

 <ol type="A">
<li>Windows 95</li>
<li>Windows 98</li>
<li>Windows 2000</li>
</ol>
  1. Windows 95
  2. Windows 98
  3. Windows 2000

Lowercase letters

 <ol type="a">
<li>HTML</li>
<li>XHTML</li>
<li>XML</li>
</ol>
  1. HTML
  2. XHTML
  3. XML

Uppercase Roman numerals

 <ol type="I">
<li>used book</li>
<li>new book</li>
<li>e-book</li>
</ol>
  1. used book
  2. new book
  3. e-book

Lowercase Roman numerals

 <ol type="i">
<li>buy soap</li>
<li>do laundry</li>
<li>pay bills</li>
</ol>
  1. buy soap
  2. do laundry
  3. pay bills

Although the value attribute is deprecated, it can be used to change the listing value as browsers still support this. For instance,

<ol type="1">
<li>Dining room</li>
<li>Living room</li>
<li value="1">Laundry room</li>
<li>Guest room</li>
</ol>

instructs the browser to use numbered list with default Arabic numerals. Furthermore, it specifies to restart the numbering at list item 3. See the output below:

  1. Dining room
  2. Living room
  3. Laundry room
  4. Guest room

You can also use the value attribute with other numbered list types. For instance, the following changes the value for an uppercase letter list:

<ol type="A">
<li>1</li>
<li>2</li>
<li>3</li>
<li value="22">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>

This code sets the value attribute at 22 for item number 4. As a result, the browser starts the listing character order sequence with the letter "V" for the fourth list item, as shown below:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8