Ordered list

An ordered list is a numbered list. An ordered list can be used whenever a list requires sequence. Let’s assume we want to create an ordered list that displays how Tom likes six colors, the most important color is listed first and the next most important color is listed second, etc.

To create such list, we would use an ordered list as:

<ol>
<li>Gold</li>
<li>Blue</li>
<li>Silver</li>
<li>White</li>
<li>Red</li>
<li>Yellow</li>
</ol>

The <ol> tag starts an ordered list. The <ol> tag is a two-sided tag, which means that it also requires a closing tag </ol>. The </ol> tag instructs the browser that the ordered list has ended. The <li> tag is used to list each item in the list. The <li> tag is also a two-sided tag. Thus each item that needs to be placed in a list, should be placed inside the <li> and </li> tag.

  1. Gold
  2. Blue
  3. Silver
  4. White
  5. Red
  6. Yellow

In the example above, the first item for our ordered list is “Gold” because it is placed inside the <li> tag and it is the first <li> tag after the <ol> tag. The second item for our list is “Blue” because it is placed inside the second <li> tag. By the same logic, you can deduce that “Silver” is third most important, and so on. Figure 1 shows the output of this example.

Change numbering style for an ordered list

The <ol> tag includes the type attribute that can be used to change numbering style for an ordered list. This attribute can be set to one of the following choices:

  • Arabic numbers (1) – to create list using Arabic numbers. This is the default type for an ordered list.
  • uppercase letters (A) – to create list using uppercase alphabet letters
  • lowercase letters (a) – to create list using lowercase alphabet letters
  • uppercase Roman numerals (I) – to create list using uppercase Roman Numerals
  • lowercase Roman numerals (i) – to create list using lowercase Roman Numerals

The following shows examples with the type attribute set to different possible values:

HTML code

<ol type="1">
<li>HTML</li>
<li>ASP</li>
<li>JavaScript</li>
</ol>

Output

  1. HTML
  2. ASP
  3. JavaScript

HTML code

<ol type="A">
<li>HTML</li>
<li>ASP</li>
<li>JavaScript</li>
</ol>

Output

  1. HTML
  2. ASP
  3. JavaScript

HTML code

<ol type="a">
<li>HTML</li>
<li>ASP</li>
<li>JavaScript</li>
</ol>

Output

  1. HTML
  2. ASP
  3. JavaScript

HTML code

<ol type="I">
<li>HTML</li>
<li>ASP</li>
<li>JavaScript</li>
</ol>

Output

  1. HTML
  2. ASP
  3. JavaScript

HTML code

<ol type="i">
<li>HTML</li>
<li>ASP</li>
<li>JavaScript</li>
</ol>

Output

  1. HTML
  2. ASP
  3. JavaScript

Changing the list value for an ordered list

With the start attribute you can set the value of the first element in the list. For example, if you wanted to start your list with the number 5, set the start attribute to 5 and the type attribute to 1, if necessary. You can also use the start attribute to change the list value of the first element for alphabetical or Roman numerical values. If, for example, you wanted to start your ordered list with the letter C, set the type attribute to A and the start attribute to 3. See some example below:

HTML codeOutputComments
<ol type="A" start="3">
<li>HTML</li>
<li>ASP</li>
<li>JavaScript</li>
</ol>		C. HTML
D. ASP
E. JavaScript		Starts the list at letter C because the starting value is set to 3.
<ol type="i" start="5">
<li>HTML</li>
<li>ASP</li>
<li>JavaScript</li>
</ol>		v. HTML
vi. ASP
vii. JavaScript		Starts the list with Roman numerical v because the start attribute is set to 5.

Note regardless of what numbering type you use for your list, the value attribute should always include Arabic numbers.

While the start attribute changes the number for the first item in the list, the value attribute can be used to change the numbering for all other list items. For instance,

<ol>
<li value="4">HTML</li>
<li value="8">ASP</li>
<li value="10">JavaScript</li>
</ol>

will produce:

  1. HTML
  2. ASP
  3. JavaScript