<ol>

  • Revision slug: HTML/Element/ol
  • Revision title: ol
  • Revision id: 7130
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 113 words added, 50 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 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.

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.

Attributes

Like all others HTML element, this element supports the global attributes.

compact {{ Deprecated_inline() }}
Indicates that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent. It doesn't work in all leading browsers.
Do not use this attribute! As it has been deprecated, you should style the element using CSS.
start {{ Deprecated_inline() }}
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 type="A" start="3">.
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.

Do not use this attribute! As it has been deprecated, use the CSS {{ cssxref("list-style-property") }} 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 start property

  <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 list

  <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

Notes

You can nest as many lists as you want, <ul> and <ol> in any order.

To change indent of list, use CSS margin property.

See also

{{ HTML:Element_Navigation() }}

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

Revision Source

<p>The HTML ordered list 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 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>
<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>
<ul> <li>Element type: <a href="/en/HTML/Block-level_elements" title="en/HTML/Block-level_elements">block-level</a></li> <li>Allowed content: <a href="/en/HTML/Element/li" title="en/HTML/Element/li">li</a></li>
</ul>
<h3>Attributes</h3>
<p>Like all others HTML element, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl> <dt> </dt><dt>compact {{ Deprecated_inline() }}</dt> <dd>Indicates that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent. It doesn't work in all leading browsers. <div class="note"><strong>Do not use this attribute! </strong>As it has been deprecated, you should style the element using <a href="/en/CSS" title="en/CSS">CSS</a>.</div></dd> <dt>start {{ Deprecated_inline() }}</dt> <dd>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 type="A" start="3"&gt;</code>.</dd> <dt>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>Do not use this attribute! </strong>As it has been deprecated, use the <a href="/en/CSS" title="en/CSS">CSS</a> {{ cssxref("list-style-property") }} property instead.</div> </dd>
</dl>
<dl> <h3>Examples</h3>
<h4 name="Simple_example">Simple example</h4>
<pre>  &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 <code>start</code> property</h4>
<pre>  &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 list</h4>
<pre>  &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>  &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>Notes</h3>
<p>You can nest as many lists as you want, <code>&lt;ul&gt;</code> and <code>&lt;ol&gt;</code> in any order.</p>
<p>To change indent of list, use <a href="/en/CSS" title="en/CSS">CSS</a> <a href="/en/CSS/margin" title="en/CSS/margin">margin</a> property.</p>
<h3>See also</h3>
<ul> <li><a href="/en/HTML/Element/li" title="en/HTML/Element/li">HTML List item element</a></li> <li><a href="/en/HTML/Element/ul" title="en/HTML/Element/ul">HTML Unordered list element</a></li> <li><a href="/en/CSS/list-style" title="en/CSS/list-style">CSS list-style property</a></li> <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a></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