Ordered Lists

Ordered Lists are essentially identical to Unordered Lists except that, instead of bullet points, they use a sequence of numbers or letters. Ordered Lists are created using the OL and LI tags, as in the following example:

<ol>
<li>Take out trash</li>
<li>Wash your hands</li>
<li>Leave the room in a huff</li>
<li>Pick your nose</li>
</ol>

Displayed:

  1. Take out trash
  2. Wash your hands
  3. Leave the room in a huff
  4. Pick your nose

The TYPE attribute for the OL tag determines which type of numbering your list will use. There are five values for the TYPE attribute: 1, A, a, I, i. These values indicate whether your numbering for a particular OL will be with numbers (default), capital or lower-case letters, or upper-case or lower-case roman numerals.

Tag: OL
Attribute: TYPE
Values: 1 (default), A, a, I, i
Description: The TYPE attribute allows you to choose the type of numbering or lettering your ordered list will follow.

Example (default numbering):

<ol>
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Example (numbered, which is the same as the default):

<ol type="1">
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Example (capital letters):

<ol type="A">
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Example (lower-case letters):

<ol type="a">
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Example (upper-case roman numerals):

<ol type="I">
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Example (lower-case roman numerals):

<ol type="i">
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Unlike UL, nested OL do not adopt different bullet points depending on the level of nesting. All OL have numerical bullets as their default state. To create nested OL with different types of numbering (letters, roman), the TYPE attribute must be stated explicitly in every nested list. (Warning: IE5 for Mac is broken in regards to nested ordered lists; see note below)

Example:

<ol>
<li>Fold Down Sheets</li>
<li>Fluff Pillows</li>
<ol type="a">
<li>Straighten Pillow One</li>
<li>Lay Pillow Two Assymetrically on Top</li>
<li>Adjust Pillow Shams Decoratively<</li>
</ol>
<li>Slide Under Covers</li>
<li>Tuck Up Covers under Chin</li>
<li>Snooze</li>
</ol>

Displayed:

  1. Fold Down Sheets
  2. Fluff Pillows
    1. Straighten Pillow One
    2. Lay Pillow Two Assymetrically on Top
    3. Adjust Pillow Shams Decoratively
  3. Slide Under Covers
  4. Tuck Up Covers under Chin
  5. Snooze

Example:

<ol type="I">
<li>Fold Down Sheets</li>
<li>Fluff Pillows</li>
<ol type="i">
<li>Straighten Pillow One</li>
<li>Lay Pillow Two Assymetrically on Top</li>
<li>Adjust Pillow Shams Decoratively<</li>
</ol>
<li>Slide Under Covers</li>
<li>Tuck Up Covers under Chin</li>
<li>Snooze</li>
</ol>

Displayed:

  1. Fold Down Sheets
  2. Fluff Pillows
    1. Straighten Pillow One
    2. Lay Pillow Two Assymetrically on Top
    3. Adjust Pillow Shams Decoratively
  3. Slide Under Covers
  4. Tuck Up Covers under Chin
  5. Snooze

Note: Internet Explorer 5 for Macintosh is broken in regards to nested Ordered Lists, causing incorrect numbering for line items. If you wish to support IE5 for Mac, you must NEVER use nested ordered lists. Internet Explorer 5 for Windows does NOT have this problem.

You may make your lists start on ANY number (not just 1, A, a, I, or i) by using the START attribute.

Tag: OL
Attribute: START
Value: any number
Description: Use the START attribute to set the starting number of your Ordered List (if you wish a sequence to begin anyplace but 1).

Example:

<ol start="4">
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Example:

<ol type="I" start="10">
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Example:

<ol type="A" start="6">
<li>Sit Down</li>
<li>Eat Lunch</li>
<li>Feel Full</li>
<li>Burp</li>
</ol>

Displayed:

  1. Sit Down
  2. Eat Lunch
  3. Feel Full
  4. Burp

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.