1. The ol element represents a list of items, where the items have been intentionally ordered
2. Typically rendered as a numbered list
3. The items of the list are the li element child nodes of the ol element

1. reversed
   1. The reversed attribute is a boolean attribute
   2. If present, it indicates a descending list
2. start
   1. The start attribute, if present, must be a valid integer
   2. Gives the ordinal value of the first list item
3. The type attribute can be used to specify the kind of marker to use in the list

   Keyword	State	Description	Example
   1	decimal	decimal number	1. 2. 3.
   a	lower-alpha	lowercase latin alphabet	a. b. c.
   A	upper-alpha	uppercase latin alphabet	A. B. C.
   i	lower-roman	lowercase roman numerals	i. ii. iii.
   I	upper-roman	uppercase roman numerals	I. II. III.

4. start vs value
   1. value, as an attribute of the li tag, may be used instead of start
   2. overrides start attribute of ul
   3. increments in subsequent li tags
   4. value must be an integer, even if the list is displayed with Roman numerals or letters
   5. The value attribute has no meaning for unordered lists
   6. The li value attribute indicates the current ordinal value of the list item as defined by the ol element
   7. (first encountered in measureUp)
5. list-style-type
   1. upper-alpha and upper-latin are identical
   2. lower-latin and lower-alpha are identical

HTML

<ol start="2">
    <li>d</li>
    <li>d</li>
    <li value="100">d</li>
    <li>d</li>
    <li>d</li>
</ol>

Browser

Note

HTML

<ol start="10" reversed>
    <li>d</li>
    <li>d</li>
    <li value="100">d</li>
    <li>d</li>
</ol>

Browser

HTML

<ol start="2" type="I">
    <li>d</li>
    <li>d</li>
    <li value="10">d</li>
    <li>d</li>
</ol>

Browser

HTML

<ol start="2" type="i">
    <li>d</li>
    <li>d</li>
    <li>d</li>
    <li>d</li>
</ol>

Browser

HTML

<ol type="a">
    <li>d</li>
    <li>d</li>
    <li>d</li>
    <li>d</li>
</ol>

Browser

HTML

<ol type="A">
    <li>d</li>
    <li>d</li>
    <li>d</li>
    <li>d</li>
</ol>

Browser

HTML

<ol>
    <li>d</li>
    <li>d</li>
    <li>d</li>
    <li>d</li>
    <li>d</li>
</ol>

CSS

ol {
    list-style-type: decimal-leading-zero;
  }

ol>li:first-of-type {
    list-style-type: decimal;
  }

ol>li:nth-of-type(2) {
    list-style-type: lower-greek;
  }

Browser

HTML

<ol>
    <li>d</li>
    <li>d</li>
    <li>d</li>
    <li>d</li>
</ol>
                            

CSS

ol {
    list-style-type: upper-roman;
  }

ol>li:first-of-type {
    list-style-type: lower-roman;
  }

ol>li:nth-of-type(2) {
    list-style-type: upper-alpha;
  }

ol>li:nth-of-type(3) {
    list-style-type: lower-alpha;
  }

Browser

HTML

<ol>
    <li>a
    <li>
        <ol>
            <li>b
            <li>b
                <ol>
                    <li>c
                    <li>c
                        <ol>
                            <li>d
                            <li>d
                            <li>d
                        </ol>
                    <li>c
                </ol>
            <li>b
        </ol>
    <li>a
    <li>a
</ol>

Browser

Notes