Menu
HTML Numbered or Ordered List

One of the most common structures found on a webpage is a list. A list can be used to organize and clarify information. There are three kinds of lists; The unordered list which is commonly known as the bulleted list, the definition list which has two parts for each item, the term and the definition, and the ordered list, which in which every item is preceded by a number or letter.

The ordered list is defined by the <ol> </ol> tag pair. Each list item is defined by a <li> </li> tag pair and the list items are automatically numbered by the browser. By default the list items are numbered beginning with the number 1. The code for an ordered list is shown below.

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3

Start Ordered List With a Different Numer

You can use the start attribute to set the starting number for an ordered list. The start attribute deprecated in HTML version 4, and un-deprecated in version 5. That shows you what happens when you have things designed by committe! The code for an ordered list starting with the number 8 is shown below.

<ol start="8">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3

Create HTML List With Letters Instead of Numbers

You can use the type attribute to identify the list items using letters instead of numbers. By setting the the type attribute to A, you can make the browser number the list items with the alphabet.

<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3

Create HTML List With Roman Numerals Instead of Numbers

You can use the type attribute to identify the list items using Roman Numerals instead of numbers. By setting the the type attribute to I, you can make the browser number the list items with Roman Numerals.

<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3

Below is a list of possible values for the type attribute of the ordered list.

1 = Arabic numbers
a = Lowercase alphabet
A = Uppercase alphabet
i = Lowercase Roman numerals
I = Uppercase Roman numerals

Create HTML List With Letters Starting With a Specific Letter

Below is an example of a list with the type attribute set to lowercase alphabet and the start attribute set to the third letter of the alphabet c.

<ol type="a" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3

• It's important to note that the start attribute needs an integer, for example you wouldn't set the start attribute to "c".

Create HTML List With Number That is Out of Sequence

Below is an example of using a <li> tag's value attribute to set that item's number to a number that is out of sequence. Note that after the second item is set to 8, the following item numbers increment from that new value.

<ol>
<li>List item 1</li>
<li value="8">List item 2</li>
<li<List item 3</li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3

Create HTML List With Greek Letters Instead of Numbers

Although this information is not strictly HTML, I just wanted to mention that if you needed something more than stright HTML can provide, you should investigate the CSS list-style-type property. The example below shows how to use the CSS list-style-type property to number list items with Greek letters starting with the third letter of the Greek alphabet.

<ol  style="list-style-type:lower-greek;" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
  1. List item 1
  2. List item 2
  3. List item 3


Learn more at amazon.com

More HTML Code:
• Image Map Basics
• HTML List Basics
• HTML5 Input Type - Email
• Use an Image as a Form Submit Button
• The HTML BODY tag
• Semantic (X)HTML: Markup with Meaning
• Web Page Template
• HTML center Tag
• HTML Image Basics
• HTML Editors