OL

ol is an HTML tag that is used to create an ordered list. This tag is useful for creating outlines and other structured or numbered lists. It is possible to specify a specific type of ordering to include Arabic numbers, lower-case alphabetic, upper-case alphabetic, lower case roman numerals, or upper case roman numerals.

See also: dd, dir, dl, dt, li, menu, ul

Attributes

The ol tag does not have any required HTML attributes. It does, however have numerous allowable attributes. Some of the most commonly used attributes are now deprecated in favor of Cascading Style Sheets.

• Deprecated Attributes
  • compact (type: Custom) - specifies that the list should be displayed in a compact manner; it is up to the user agent to determine what this means and how to do it
  • start (type: Number) - specifies where to start the ordered list; while it requires a number it still works for roman numerals and alpha characters (e.g., start="2" would yield "B" for alpha and "II" for roman numerals)
  • type (type: OLStyle) - determines which ordering style to use. (1 = Arabic, I = upper Roman, i = lower Roman, A = upper alpha, a = lower alpha)
     
• HTML Core Attributes
  • class (type: CDATA) - space separated list of classes
  • id (type: ID) - document-wide unique id
  • style (type: Style Sheet) - associated style information
  • title (type: Text) - advisory title/amplification; this information is usually displayed through tooltips
     
• HTML International Attributes (I18N)
  • dir (type: Custom) - specifies the direction of weak or neutral text; valid values include ltr (left to right) or rtl (right to left)
  • lang (type: Custom) - specifies the Language Code of the language used in the text
     
• HTML Event Attributes
  • onclick (type: Script) - a pointer button was clicked
  • ondblclick (type: Script) - a pointer button was double clicked
  • onkeydown (type: Script) - a key was pressed down
  • onkeypress (type: Script) - a key was pressed and released
  • onkeyup (type: Script) - a key was released
  • onmousedown (type: Script) - a pointer button was pressed down
  • onmousemove (type: Script) - a pointer was moved within
  • onmouseout (type: Script) - a pointer was moved away
  • onmouseover (type: Script) - a pointer was moved onto
  • onmouseup (type: Script) - a pointer button was released

Usage

In its simplest form, to use the ol tag simply place opening and closing HTML tags around a series of list items (which use the li tag). However, it can be a little tricky when dealing with nested lists. If you have lists inside of lists, be sure that you enclose each nested list entirely within an li tag. For example:

Simple Example

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ol>

Complex Example

<ol type="I">
  <li>Upper-Case Roman Numerals 1</li>
  <li>Upper-Case Roman Numerals 2
    <ol type="A">
      <li>Upper-Case Alpha 1</li>
      <li>Upper-Case Alpha 2
        <ol type="1">
          <li>Arabic Numerals 1</li>
          <li>Arabic Numerals 2
            <ol type="i">
              <li>Lower-Case Roman Numerals 1</li>
              <li>Lower-Case Roman Numerals 2
                <ol type="a" start="2">
                  <li>Lower-Case Alpha 1</li>
                  <li>Lower-Case Alpha 2</li>
                  <li>Lower-Case Alpha 3</li>
                </ol>
              </li>
              <li>Lower-Case Roman Numerals 3</li>
            </ol>
          </li>
          <li>Arabic Numerals 3</li>
        </ol>
      </li>
      <li>Upper-Case Alpha 3</li>
    </ol>
  </li>
  <li>Upper-Case Roman Numerals 3</li>
</ol>

The above example would show a series of nested lists each ordered by the identifier specified by the attribute in the ol tag. Notice that in the Lower Case Alpha list, the start attribute was set to "2" which will start the "numbering" of this list at the second value - in this case "b". You can see this in action below.

See also: this and this.

Everything2 Support?

E2 does provide limited support for the ol tag. In addition, it provides support for the type and start attributes. Below is how your browser displays the example above here on Everything2:

Simple Example

1. One
2. Two
3. Three

Complex Example

1. Upper-Case Roman Numerals 1
2. Upper-Case Roman Numerals 2
   1. Upper-Case Alpha 1
   2. Upper-Case Alpha 2
      1. Arabic Numerals 1
      2. Arabic Numerals 2
         1. Lower-Case Roman Numerals 1
         2. Lower-Case Roman Numerals 2
            2. Lower-Case Alpha 1
            3. Lower-Case Alpha 2
            4. Lower-Case Alpha 3
         3. Lower-Case Roman Numerals 3
      3. Arabic Numerals 3
   3. Upper-Case Alpha 3
3. Upper-Case Roman Numerals 3

If you would like to use this tag with any of its other attributes or with style sheets, you can do so in your Notelet Nodelet.

Common Browser Implementations*

Most web browsers support this tag, as it has been around since HTML 2.0. Most browsers will display the ordered lists in the same general manner though you may see minor differences between platforms, operating systems, and browsers.

Previous HTML Tag: object (previous E2 supported HTML tag: li)
Next HTML Tag: optgroup (next E2 supported HTML tag: p)
See Also: HTML tags and HTML attributes

* Please feel free to send me information about how other browsers implement this tag.