Certified HTML5 Developer Learning Resources ol Tag for Ordered Lists

Learning Resources
 

ol Tag for Ordered Lists


An ordered list starts with the

    tag. Each list item starts with the
  1. tag.

    The list items are marked with numbers.

    Attribute definitions

    • type  =  style-information [CI]
    •     Deprecated. This attribute sets the style of a list item. Currently available values are intended for visual user agents. Possible values are described below (along with case information).
    • start = number [CN]
    •     Deprecated. For OL only. This attribute specifies the starting number of the first item in an ordered list. The default starting number is "1". Note that while the value of this attribute is an integer, the corresponding label may be non-numeric. Thus, when the list item style is uppercase latin letters (A, B, C, ...), start=3 means "C". When the style is lowercase roman numerals, start=3 means "iii", etc.
    • value = number [CN]
    •     Deprecated. For LI only. This attribute sets the number of the current list item. Note that while the value of this attribute is an integer, the corresponding label may be non-numeric (see the start attribute).
    • compact [CI]
    •     Deprecated. When set, this boolean attribute gives a hint to visual user agents to render the list in a more compact way. The interpretation of this attribute depends on the user agent.


    Attributes defined elsewhere

    •     id, class (document-wide identifiers)
    •     lang (language information), dir (text direction)
    •     title (element title)
    •     style (inline style information)
    •     onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

    Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered.

    Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted).

    Ordered Lists - Uses numbers, letters, or Roman numerals
    If you want this style of list... Here's the code to make it...
    1. First things first.
    2. Second things not first.
    3. Add an
    4. for each item.

    1. First things first.

    2. Second things not first.

    3. Add an
    4. for each item.

    1. Everybody is somebody.
    2. Be somebody nice!

    1. Everybody is somebody.

    2. Be somebody nice!

    1. A life of ease...
    2. is a difficult pursuit.

    1. A life of ease...

    2. is a difficult pursuit.

    1. Learn from others...
    2. or learn the hard way.

    1. Learn from others...

    2. or learn the hard way.

    1. I'm running out...
    2. of witty sayings.

    1. I'm running out...

    2. of witty sayings.

    • Lists are handier to use than creating simulated lists by coding your own numbers because you can insert a list item at any point and the browser automatically renumbers all items.
    • Using a list means all your text for each list item is indented. Coding list by hand means long sentences or paragraphs will wrap under the number instead of remaining indented.
    • You can interrupt your list at any point by canceling it, add commentary, then restart the list at the number or letter you left off with using CSS. This can also be done with HTML, but that method is deprecated.
    • You can use other HTML tags within a list, such as paragraphs, bold and italic text for emphasis, or other elements.
    • You can also create lists...
      1. ...within lists using the list-style-type property and value
        1. to create the desired
        2. list marker variations.
      2. As you cancel each list the indentation stops and
      3. the list items continue from the previous list.

    For the OL element, possible values for the type attribute are summarized in the table below (they are case-sensitive):

    Type Numbering style
    1 arabic numbers 1, 2, 3, ...
    a lower alpha a, b, c, ...
    A upper alpha A, B, C, ...
    i lower roman i, ii, iii, ...
    I upper roman I, II, III, ...

     

 For Support