Summary
The HTML <ol> Element (or HTML Ordered List Element) represents an ordered list of items. Typically, ordered-list items are displayed with a preceding numbering, which can be of any form, like numerals, letters or Romans numerals or even simple bullets. This numbered style is not defined in the HTML description of the page, but in its associated CSS, using the {{cssxref("list-style-type")}} property.
There is no limitation to the depth and imbrication of lists defined with the {{HTMLElement("ol")}} and {{HTMLElement("ul")}} elements.
Usage note: The {{HTMLElement("ol")}} and {{HTMLElement("ul")}} both represent a list of items. They differ in the way that, with the {{HTMLElement("ol")}} element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the {{HTMLElement("ol")}} element should be used, else the {{HTMLElement("ul")}} is adequate.
- Content categoriesFlow content, and if the
<ol>element's children include at least one {{HTMLElement("li")}} element, palpable content. - Permitted content Zero or more {{HTMLElement("li")}} elements
- Tag omission {{no_tag_omission}}
- Permitted parent elements Any element that accepts flow content.
- DOM interface {{domxref("HTMLOListElement")}}
Attributes
This element includes the global attributes.
- {{htmlattrdef("compact")}} {{Deprecated_inline}}
-
This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent and it doesn't work in all browsers. {{noteStart}}Do not use this attribute, as it has been deprecated: the {{HTMLElement("ol")}} element should be styled using CSS. To give a similar effect than the
compactattribute, the CSS property {{cssxref("line-height")}} can be used with a value of80%.{{noteEnd}} - {{htmlattrdef("reversed")}} {{HTMLVersionInline(5)}}
- This Boolean attribute specifies that the items of the item are specified in the reverse order, i.e. that the least important one is listed first.
- {{htmlattrdef("start")}}{{HTMLVersionInline(5)}}
-
This integer attribute specifies the start value for numbering the individual list items. Although the ordering type of list elements might be Roman numerals, such as XXXI, or letters, the value of start is always represented as a number. To start numbering elements from the letter "C", use
<ol start="3">.Note: This attribute was deprecated in HTML4, but reintroduced in HTML5. - {{htmlattrdef("type")}}
-
Indicates the numbering type:
'a'indicates lowercase letters,'A'indicates uppercase letters,'i'indicates lowercase Roman numerals,'I'indicates uppercase Roman numerals,- and
'1'indicates numbers (default).
The type set is used for the entire list unless a different {{htmlattrxref("type", "li")}} attribute is used within an enclosed {{HTMLElement("li")}} element.
Note: This attribute was deprecated in HTML4, but reintroduced in HTML5. Unless the value of the list number matters (e.g. in legal or technical documents where items are to be referenced by their number/letter), the CSS {{cssxref("list-style-type")}} property should be used instead.
Examples
Simple example
<ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
Above HTML will output:
- first item
- second item
- third item
Using the start attribute
<ol start="7"> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
Above HTML will output:
- first item
- second item
- third item
Nesting lists
<ol>
<li>first item</li>
<li>second item <!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li> <!-- Here is the closing </li> tag -->
<li>third item</li>
</ol>
Above HTML will output:
- first item
- second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
Nested <ol> and <ul>
<ol>
<li>first item</li>
<li>second item <!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ul>
</li> <!-- Here is the closing </li> tag -->
<li>third item</li>
</ol>
Above HTML will output:
- first item
- second item
- second item first subitem
- second item second subitem
- second item third subitem
- third item
Specifications
| Specification | Status | Comment |
|---|---|---|
| {{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '<ol>')}} | {{Spec2('HTML WHATWG')}} | |
| {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}} | {{Spec2('HTML5 W3C')}} | |
| {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}} | {{Spec2('HTML4.01')}} |
Browser compatibility
{{CompatibilityTable}}
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | {{CompatGeckoDesktop("1.0")}} | 1.0 | 1.0 | 1.0 |
reversed attribute |
18 | {{CompatGeckoDesktop("18.0")}} | {{CompatNo}} | {{CompatNo}} | 5.2 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | {{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
reversed attribute |
{{CompatVersionUnknown}} | {{CompatGeckoMobile("18.0")}} | {{CompatNo}} | {{CompatNo}} | {{CompatVersionUnknown}} |
See also
- Other list-related HTML Elements: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} and the obsolete {{HTMLElement("dir")}};
- CSS properties that may be specially useful to style the
<ol>element:- the {{cssxref("list-style")}} property, useful to choose the way the ordinal is displayed,
- CSS counters, useful to handle complex nested lists,
- the {{cssxref("line-height")}} property, useful to simulate the deprecated {{htmlattrxref("compact", "ol")}} attribute,
- the {{cssxref("margin")}} property, useful to control the indent of the list.
{{HTMLRef}}