E-Mail » HTML Tags »

ol

Define an ordered list using <li> ... </li> tags.

Usage:

<ol>
<li> ... </li>
... etcetera ...
</ol>


OR

<ol type="1|A|a|I|i" start="1">
<li> ... </li>
... etcetera ...
</ol>

type    Sets bullet style for this list. Type values are:
1       Numbers (default)
A       Capital letters
a       Lowercase letters
I       Uppercase Roman numerals
i       Lowercase Roman numerals

start   Sets the starting value of the list

Best Practice Examples:
<b>Meeting from Hell Topics</b><br />
<ol>
<li><font face="Times,serif" size="2">Opening Remarks</font>
<ol type="A">
<li><font face="Times,serif" size="2">CEO's Blather</font>
<ol type="I">
<li><font face="Times,serif" size="2">CEO's Golf Club Membership Drive</font>
<ol type="a">
<li><font face="Times,serif" size="2">CEO's Golf Club Membership Drive Luncheon</font>
<ol type="i">
<li><font face="Times,serif" size="2">CEO's Golf Club Membership Drive Luncheon Menu</font></li>
</ol></li></ol></li></ol></li></ol></li></ol>


Meeting from Hell Topics

  1. Opening Remarks
    1. CEO's Blather
      1. CEO's Golf Club Membership Drive
        1. CEO's Golf Club Membership Drive Luncheon
          1. CEO's Golf Club Membership Drive Luncheon Menu


Using Default Numbering
<b>Pinball Machines of the 1960s</b>
<ol>
<li>Spin-A-Card</li>
<li>Op-Pop-Pop</li>
<li>Pirate Gold</li>
<li>On Beam</li>
<li>Seven Up</li>
</ol>


Pinball Machines of the 1960s
  1. Spin-A-Card
  2. Op-Pop-Pop
  3. Pirate Gold
  4. On Beam
  5. Seven Up

Using Uppercase Letters
<b>Pinball Machines of the 1970s</b>
<ol type="A">
<li>Captain Fantastic</li>
<li>Evel Knievel</li>
<li>Paragon</li>
<li>Meteor</li>
<li>Kiss</li>
</ol>


Pinball Machines of the 1970s
  1. Captain Fantastic
  2. Evel Knievel
  3. Paragon
  4. Meteor
  5. Kiss

Using Uppercase Roman Numerals
<b>Pinball Machines of the 1980s</b>
<ol type="I">
<li>Flash Gordon</li>
<li>Xenon</li>
<li>Black Knight</li>
<li>Silverball Mania</li>
<li>Space Invaders</li>
</ol>


Pinball Machines of the 1980s
  1. Flash Gordon
  2. Xenon
  3. Black Knight
  4. Silverball Mania
  5. Space Invaders

Using Lowercase Roman Numerals
<b>Pinball Machines of the 1990s</b>
<ol type="a">
<li>Addams Family</li>
<li>Pin*bot</li>
<li>Medieval Madness</li>
<li>The Simpsons</li>
<li>South Park</li>
</ol>


Pinball Machines of the 1990s
  1. Addams Family
  2. Pin*bot
  3. Medieval Madness
  4. The Simpsons
  5. South Park

Using Lowercase Roman Numerals
<b>Pinball Machines of the 2000s</b>
<ol type="i">
<li>Champion Pub</li>
<li>High Roller Casino</li>
<li>Lord Of The Rings</li>
<li>Monopoly</li>
<li>Austin Powers</li>
</ol>


Pinball Machines of the 2000s
  1. Champion Pub
  2. High Roller Casino
  3. Lord Of The Rings
  4. Monopoly
  5. Austin Powers


Using the start attribute

...resuming interrupted grocery list from item 147...
<ol type="i" start="147">
<li>Menorah</li>
<li>Duct tape</li>
<li>Plunger</li>
<li>Ladder</li>
<li>Bucket</li>
</ol>


  1. Menorah
  2. Duct tape
  3. Plunger
  4. Ladder
  5. Bucket


<ol style="font: 18pt Arial, sans-serif; color: #000000;">
<li style="color: #990000;"><font face="Arial,sans-serif" size="2" color="#000000" style="font: 10pt Arial,sans-serif; color: #000000;">Red</font></li>
<li type="A" style="color: #009900;"><font face="Arial,sans-serif" size="2" color="#000000" style="font: 10pt Arial,sans-serif; color: #000000;">Green</font></li>
<li type="i" style="color: #000099;"><font face="Arial,sans-serif" size="2" color="#000000" style="font: 10pt Arial,sans-serif; color: #000000;">Blue</font></li>
<li type="a" style="color: #999900;"><font face="Arial,sans-serif" size="2" color="#000000" style="font: 10pt Arial,sans-serif; color: #000000;">Yellow</font></li>
<li type="I" style="color: #990099;"><font face="Arial,sans-serif" size="2" color="#000000" style="font: 10pt Arial,sans-serif; color: #000000;">Magenta</font></li>
<li type="1" style="color: #009999;"><font face="Arial,sans-serif" size="2" color="#000000" style="font: 10pt Arial,sans-serif; color: #000000;">Cyan</font></li>
<li type="1" style="color: #999999;"><font face="Arial,sans-serif" size="2" color="#000000" style="font: 10pt Arial,sans-serif; color: #000000;">Black (Grey)</font></li>
</ol>

  1. Red
  2. Green
  3. Blue
  4. Yellow
  5. Magenta
  6. Cyan
  7. Black (Grey)

An interesting thing to note in this example is that if you define the point size in the <ol> tag as being a larger size than the text actually displayed by the list, the ordered list number/letter can be made larger/smaller than the bulleted text. Doing this with an unordered list <ul> will adjust the line spacing, but NOT the size of the actual bullets.

NOTES:
This type of formatted list will work in all known e-mail clients.
The list-style-type style property (which can be used in the <ul> tag) does not work in Outlook '07, Windows Live Mail, and Hotmail. Ordinarily you would define this like: <ul style="list-style-type: none;">, which would render any elements in that list without any bullet points. This was once used as an indented paragraph trick by HTML designers, even though it was faulty because implied list margin indentation space varies from browser to browser.
Many people think that the closing tag </li> is optional. If you were writing straight HTML, it might be. If you were writing cross-browser XHTML (which you should be if you are writing e-mails), it is REQUIRED. (Trust me on this.)

Related Links:
None:

E-Mail » HTML Tags »