• Coffee
  • ">
  • Coffee
  • " />
    Easy Tutorial
    ❮ Att Form Enctype Att Ul Compact ❯

    HTML <ol> Tag

    Example

    Two different ordered list examples:

    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    
    <ol start="50">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    

    Browser Support

    Element Chrome Edge Firefox Safari Opera
    <ol> Yes Yes Yes Yes Yes

    Tag Definition and Usage

    The <ol> tag defines an ordered list. The list items are typically displayed with a preceding numbering.

    Use the <li> tag to define list items.


    Tips and Notes

    Tip: You can style lists with CSS. For more details, see CSS Lists.

    Tip: For unordered lists, use the <ul> tag.


    Differences Between HTML 4.01 and HTML5

    The "reversed" attribute is new in HTML5.

    The "compact" attribute is obsolete in HTML5 and is not supported.


    Attributes

    Attribute Value Description
    compact compact Not supported in HTML5. Deprecated. Use CSS instead. <br>Specifies that the list should be displayed smaller than the normal size.
    reversed New reversed Specifies that the list order should be descending (9,8,7...).
    start number An integer attribute that specifies the start value of the list. This attribute was deprecated in HTML4 but reintroduced in HTML5.
    type a (lowercase letters) <br> A (uppercase letters) <br> i (lowercase Roman numerals) <br> I (uppercase Roman numerals) <br> 1 (numbers, default) Specifies the type of the list. Deprecated. Use CSS instead.

    More Examples

    Example

    Setting different list styles using CSS:

    <ol style="list-style-type:upper-roman">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>
    
    <ol style="list-style-type:lower-alpha">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>
    

    Example

    Using CSS to display different list styles:

    ol.a {list-style-type: armenian;}
    ol.b {list-style-type: cjk-ideographic;}
    ol.c {list-style-type: decimal;}
    ol.d {list-style-type: decimal-leading-zero;}
    ol.e {list-style-type: georgian;}
    ol.f {list-style-type: hebrew;}
    ol.g {list-style-type: hiragana;}
    ol.h {list-style-type: hiragana-iroha;}
    ol.i {list-style-type: katakana;}
    ol.j {list-style-type: katakana-iroha;}
    ol.k {list-style-type: lower-alpha;}
    ol.l {list-style-type: lower-greek;}
    ol.m {list-style-type: lower-latin;}
    ol.n {list-style-type: lower-roman;}
    ol.o {list-style-type: upper-alpha;}
    ol.p {list-style-type: upper-latin;}
    ol.q {list-style-type: upper-roman;}
    ol.r {list-style-type: none;}
    ol.s {list-style-type: inherit;}
    

    Example

    Nested lists:

    <ol>
      <li>Coffee</li>
      <li>Tea
        <ul>
          <li>Black tea</li>
          <li>Green tea</li>
        </ul>
      </li>
      <li>Milk</li>
    </ol>
    
    <li>Green tea</li>
    </ul>
    </li>
    <li>Milk</li>
    </ol>
    

    Global Attributes

    The <ol> tag supports global attributes. View the complete attribute table HTML Global Attributes.


    Event Attributes

    The <ol> tag supports all HTML Event Attributes.


    Related Articles

    HTML Tutorial: HTML Lists ```

    ❮ Att Form Enctype Att Ul Compact ❯