<ol>

  • Revision slug: HTML/Element/ol
  • Revision title: ol
  • Revision id: 7125
  • Created:
  • Creator: Mgjbot
  • Is current revision? No
  • Comment robot Adding: [[pl:HTML:Element:ol]]

Revision Content

Summary

Ordered list element is used to define an ordered or numbered list of items. The numbering style comes in many forms, including letters, Roman numerals, and regular numerals. The individual items within the list are specified by list item (<li>) elements included with the <ol> element.

Attributes

start {{template.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 {{template.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. Type set in an <ol> element is used for the entire list unless a type attribute is used within an enclosed <li> element. This attribute is deprecated, use CSS list-style-type property instead.
compact {{template.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.

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

{{wiki.template('HTML:Element_Navigation')}}

{{ wiki.languages( { "pl": "pl/HTML/Element/ol" } ) }}

Revision Source

<h3 name="Summary"> Summary </h3>
<p><b>Ordered list</b> element is used to define an ordered or numbered list of items. The numbering style comes in many forms, including letters, Roman numerals, and regular numerals. The individual items within the list are specified by <a href="en/HTML/Element/li">list item</a> (<a href="en/HTML/Element/li">&lt;li&gt;</a>) elements included with the <code>&lt;ol&gt;</code> element.
</p>
<ul><li> Element type: <a href="en/HTML/Block-level_elements">block-level</a>
</li><li> Allowed content: <a href="en/HTML/Element/li">li</a>
</li></ul>
<h3 name="Attributes"> Attributes </h3>
<dl><dt>start {{template.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></dl>
<dl><dt>type {{template.Deprecated_inline()}}</dt><dd> Indicates the numbering type: <code>a</code> indicates lowercase letters, <code>A</code> indicates uppercase letters, <code>i</code> indicates lowercase Roman numerals, <code>I</code> indicates uppercase Roman numerals, and <code>1</code> indicates numbers. Type set in an <code>&lt;ol&gt;</code> element is used for the entire list unless a type attribute is used within an enclosed  <a href="en/HTML/Element/li">&lt;li&gt;</a> element. This attribute is deprecated, use <a href="en/CSS">CSS</a> <a href="en/CSS/list-style-type">list-style-type</a> property instead.
</dd></dl>
<dl><dt>compact {{template.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.
</dd></dl>
<h3 name="Examples"> 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 name="Using_start_property"> 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 name="Nesting_list"> 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 name="Nested_.3Col.3E_and_.3Cul.3E"> 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 name="Notes"> 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">CSS</a> <a href="en/CSS/margin">margin</a> property.
</p>
<h3 name="See_also"> See also </h3>
<ul><li> <a href="en/HTML/Element/li">HTML List item element</a>
</li><li> <a href="en/HTML/Element/ul">HTML Unordered list element</a>
</li><li> <a href="en/CSS/list-style">CSS list-style property</a>
</li><li> <a href="en/CSS_Counters">CSS counters</a>
</li></ul>
<p>{{wiki.template('HTML:Element_Navigation')}}
</p>{{ wiki.languages( { "pl": "pl/HTML/Element/ol" } ) }}
Revert to this revision