Ordered Lists — <ol> and <li>

Topics on This Page

The <ol> and <li> Tags
The type Attribute
The start and value Attributes
Lists and CSS
Example

The <ol> and <li> Tags

<ul>

  Attributes:
     type="A|a|I|i|1"     (deprecated)
     start="number        (deprecated)

  Contents:
     <li> tags only

<li>

  Attributes:
     type="A|a|I|i|1"     (deprecated)
     value="number        (deprecated)

  Contents:
     Inline elements and block elements

An ordered list is similar to an unordered list, except that the bullets are replaced by numbers. Here is an example:

<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

The type Attribute

The type attribute lets you choose the type of numbering. The default choice of "1" gives decimal numbers. "A" gives uppercase letters (A=1, B=2, etc), while "a" gives lowercase letters. "I" givers uppercase Roman numerals (I, II, III, IV, etc), while "i" gives lowercase Roman numerals. When used in <ol>, the chosen type applies to all of the elements. When used in <li>, the result is browser-dependant. In some, only that item is displayed with the chosen type. In others, all items from that point on use the chosen type until another <li> tag with type is found.

<ol type="i">
  <li> List item #1 </li>
  <li> List item #2 </li>
  <li> List item #3 </li>
  <li> List item #4 </li>
  <li> List item #5 </li>
  <li> List item #6 </li>
</ol>

1. List item #1
2. List item #2
3. List item #3
4. List item #4
5. List item #5
6. List item #6

The start and value Attributes

The start attribute lets you specify the starting value for the first element. The value attribute lets you reset the value to another.

<ol start="5">
  <li> List item #1 </li>
  <li> List item #2 </li>
  <li> List item #3 </li>
  <li value="1"> List item #4 </li>
  <li> List item #5 </li>
  <li> List item #6 </li>
</ol>

5. List item #1
6. List item #2
7. List item #3
1. List item #4
2. List item #5
3. List item #6

Lists and CSS

As with ordered lists, you'll want to apply styles to <ol> rather than to <li> to affect the text in a list because of Netscape 4.

<style type="text/css"> <!--
  ol { color: blue; }
--> </style>
  .
  .
  .
<ol>
  <li> List item #1 </li>
  <li> List item #2 </li>
  <li> List item #3 </li>
</ol>

There are some CSS properties provided especially for ordered lists. These include:

list-style-type: decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
list-style-position: outside|inside;

list-style-type takes the place of the type attribute. It has one additional option: turning off the numbers altogether.

list-style-position controls where text is placed if a list item spills onto two or more lines. The default outside gives a rendering like this:

    1  Item #1
       2nd line of item #1

inside moves the second line beneath the bullet:

    1  Item #1
    2nd line of item #1

list-style-position is not supported in many browsers yet.

Example

Play around with lists a bit. Try applying different styles.

Notice how I styled the inner list differently by using a ol ol selector to select <ol> tags that are inside another <ol> tag.

Try applying the styles to li instead of to ol, especially in Netscape 4. What happens if you use li li in place of ol ol? What happens with ol ol li?