<ol>

  • Revision slug: HTML/Element/ol
  • Revision title: ol
  • Revision id: 7156
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 6 words added, 1 words removed

Revision Content

The HTML ordered list element (<ol>) 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.

Usage context

Content categories flow content
Permitted content zero or more {{ HTMLElement("li") }} elements, eventually mixed with {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.
Tag omission none, both the start tag and the end tag are mandatory
Permitted parent elements any element that accept flowing content
Normative document HTML5, section 4.5.5({{ HTMLVersionInline("4") }} : HTML4.01, section 10.2)

DOM Interface

This element implements the HTMLOListElement interface.

Attributes

Like all other HTML elements, this element supports 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.
Usage note: 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 compact attribute, the CSS property {{ cssxref("list-height") }}can be used with a value of 80%.
{{ htmlattrdef("reversed") }} {{ HTMLVersionInline("5") }}{{ unimplemented_inline() }}
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. Browsers, by default, numbered the items in the reverse order too.
{{ 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: that attribute was deprecated in HTML4, but reintroduced in HTML5.
{{ htmlattrdef("type") }} {{ Deprecated_inline() }}
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.

The type set is used for the entire list unless a different {{ htmlattrxref("type", "li") }} attribute is used within an enclosed {{ HTMLElement("li") }} element.

Usage note: Do not use this attribute, as it has been deprecated: use the CSS {{ cssxref("list-style-type") }} property instead.

Examples

Simple example

  <ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
  </ol>

Above HTML will output:

  1. first item
  2. second item
  3. 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:

  1. first item
  2. second item
  3. 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:

  1. first item
  2. second item
    1. second item first subitem
    2. second item second subitem
    3. second item third subitem
  3. 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:

  1. first item
  2. second item
    • second item first subitem
    • second item second subitem
    • second item third subitem
  3. third item

See also

  • Other list-related HTML Elements: {{ HTMLElement("ul") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }};
  • CSS properties that may be specially useful to style the <ol> element: 
    • the list-style property, useful to choose the way the ordinal is displayed,
    • CSS counters, useful to handle complex nested lists,
    • the line-height property, useful to simulate the deprecated {{ htmlattrxref("compact", "ol") }} attribute,
    • the margin property, useful to control the indent of the list.

{{ HTML:Element_Navigation() }}

{{ languages( { "de": "de/HTML/Element/ol", "pl": "pl/HTML/Element/ol" } ) }}

Revision Source

<p>The HTML <em>ordered list</em> element (<span style="font-family: Courier New;">&lt;ol&gt;</span>) 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.</p>
<p>There is no limitation to the depth and imbrication of lists defined with the {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.</p>
<div class="note"><strong>Usage note: </strong> 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.</div>
<h3>Usage context</h3>
<table class="fullwidth-table"> <tbody> <tr> <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Content categories</a></td> <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a></td> </tr> <tr> <td>Permitted content</td> <td>zero or more {{ HTMLElement("li") }} elements, eventually mixed with {{ HTMLElement("ol") }} and {{ HTMLElement("ul") }} elements.</td> </tr> <tr> <td>Tag omission</td> <td>none, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td> </tr> <tr> <td>Permitted parent elements</td> <td>any element that accept flowing content</td> </tr> <tr> <td>Normative document</td> <td><a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ol-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ol-element">HTML5, section 4.5.5</a>({{ HTMLVersionInline("4") }} : <a class=" external" href="http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2" title="http://www.w3.org/TR/REC-html40/struct/lists.html#h-10.2">HTML4.01, section 10.2</a>)</td> </tr> </tbody>
</table>
<h3>DOM Interface</h3>
<p>This element implements the <code><a href="/en/DOM/HTMLOListElement" title="en/DOM/HTMLOListElement">HTMLOListElement</a></code> interface.</p>
<h3>Attributes</h3>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl> <dt>{{ htmlattrdef("compact") }} {{ Deprecated_inline() }}</dt> <dd>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. <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: the {{ HTMLElement("ol") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect than the <span style="font-family: Courier New;">compact</span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("list-height") }}can be used with a value of <span style="font-family: Courier New;">80%</span>.</div> </dd> <dt>{{ htmlattrdef("reversed") }} {{ HTMLVersionInline("5") }}{{ unimplemented_inline() }}</dt> <dd>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. Browsers, by default, numbered the items in the reverse order too.</dd> <dt>{{ htmlattrdef("start") }}{{ HTMLVersionInline("5") }}</dt> <dd>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 <code>&lt;ol start="3"&gt;</code>. <div class="note"><strong>Note</strong>: that attribute was deprecated in HTML4, but reintroduced in HTML5.</div> </dd> <dt>{{ htmlattrdef("type") }} {{ Deprecated_inline() }}</dt> <dd>Indicates the numbering type: <ul> <li><span style="font-family: Courier New;"><code>'a'</code></span> indicates lowercase letters,</li> <li><span id="1284454877507S" style="display: none;"> </span><span style="font-family: Courier New;"><code>'<span id="1284454878023E" style="display: none;"> </span>A'</code></span> indicates uppercase letters,</li> <li><span style="font-family: Courier New;"><code>'i'</code></span> indicates lowercase Roman numerals,</li> <li><span style="font-family: Courier New;"><code>'I'</code></span> indicates uppercase Roman numerals,</li> <li>and <span style="font-family: Courier New;"><code>'1'</code></span> indicates numbers.</li> </ul> <p>The type set is used for the entire list unless a different {{ htmlattrxref("type", "li") }} attribute is used within an enclosed {{ HTMLElement("li") }} element.</p> <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it has been deprecated: use the <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-type") }} property instead.</div> </dd>
</dl>
<dl><h3>Examples</h3> <h4 name="Simple_example">Simple example</h4> <pre class="brush: html">  &lt;ol&gt;
    &lt;li&gt;first item&lt;/li&gt;
    &lt;li&gt;second item&lt;/li&gt;
    &lt;li&gt;third item&lt;/li&gt;
  &lt;/ol&gt;
</pre> <p>Above HTML will output:</p> <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> <h4>Using the <span style="font-family: Courier New;"><code>start</code></span> attribute</h4> <pre class="brush: html">  &lt;ol start="7"&gt;
    &lt;li&gt;first item&lt;/li&gt;
    &lt;li&gt;second item&lt;/li&gt;
    &lt;li&gt;third item&lt;/li&gt;
  &lt;/ol&gt;
</pre> <p>Above HTML will output:</p> <ol start="7"> <li>first item</li> <li>second item</li> <li>third item</li> </ol> <h4>Nesting lists</h4> <pre class="brush: html">  &lt;ol&gt;
    &lt;li&gt;first item&lt;/li&gt;
    &lt;li&gt;second item      &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
      &lt;ol&gt;
        &lt;li&gt;second item first subitem&lt;/li&gt;
        &lt;li&gt;second item second subitem&lt;/li&gt;
        &lt;li&gt;second item third subitem&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/li&gt;                &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
    &lt;li&gt;third item&lt;/li&gt;
  &lt;/ol&gt;
</pre> <p>Above HTML will output:</p> <ol> <li>first item</li> <li>second item <ol> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ol> </li> <li>third item</li> </ol> <h4>Nested &lt;ol&gt; and &lt;ul&gt;</h4> <pre class="brush: html">  &lt;ol&gt;
    &lt;li&gt;first item&lt;/li&gt;
    &lt;li&gt;second item      &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
      &lt;ul&gt;
        &lt;li&gt;second item first subitem&lt;/li&gt;
        &lt;li&gt;second item second subitem&lt;/li&gt;
        &lt;li&gt;second item third subitem&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;                &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
    &lt;li&gt;third item&lt;/li&gt;
  &lt;/ol&gt;
</pre> <p>Above HTML will output:</p> <ol> <li>first item</li> <li>second item <ul> <li style="list-style-type:square">second item first subitem</li> <li style="list-style-type:square">second item second subitem</li> <li style="list-style-type:square">second item third subitem</li> </ul> </li> <li>third item</li> </ol> <h3>See also</h3> <ul> <li>Other list-related HTML Elements: {{ HTMLElement("ul") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }};</li> <li>CSS properties that may be specially useful to style the <span style="font-family: Courier New;">&lt;ol&gt;</span> element:  <ul> <li>the <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a> property, useful to choose the way the ordinal is displayed,</li> <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, useful to handle complex nested lists,</li> <li>the <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a> property, useful to simulate the deprecated {{ htmlattrxref("compact", "ol") }} attribute,</li> <li>the <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> property, useful to control the indent of the list.</li> </ul> </li> </ul> <p>{{ HTML:Element_Navigation() }}</p> <p>{{ languages( { "de": "de/HTML/Element/ol", "pl": "pl/HTML/Element/ol" } ) }}</p></dl>
Revert to this revision