Ordered list

From Wikipedia, the free encyclopedia

In HTML an ordered list <ol> .. </ol> is a HTML element for a list of items where each item is automatically prefixed by an indication of its position in the list.

An unordered list <ul> .. </ul> is an HTML element for a list of items where each item is prefixed by a fixed symbol, or nothing.

A list-style-type implies the prefixes to be equal or changing, and overrides the distinction between ol and ul.

Examples: decimal (default list-style-type for ol):

<ol>
<li>Amsterdam</li>
<li>Rotterdam</li>
<li>The Hague</li>
</ol>

gives

  1. Amsterdam
  2. Rotterdam
  3. The Hague


Contents

[edit] List style types

Specifying a list-style-type:

lower-alpha:

<ol style="list-style-type: lower-alpha">
<li>Amsterdam</li>
<li>Rotterdam</li>
<li>The Hague</li>
</ol>

gives

  1. Amsterdam
  2. Rotterdam
  3. The Hague

Similarly:

upper-alpha:

  1. Amsterdam
  2. Rotterdam
  3. The Hague

lower-roman:

  1. Amsterdam
  2. Rotterdam
  3. The Hague

upper-roman:

  1. Amsterdam
  2. Rotterdam
  3. The Hague

disc (default list-style-type for 1st-level ul):

  1. Amsterdam
  2. Rotterdam
  3. The Hague

circle (default list-style-type for 2nd-level ul):

  1. Amsterdam
  2. Rotterdam
  3. The Hague

square (default list-style-type for 3rd and higher level ul):

  1. Amsterdam
  2. Rotterdam
  3. The Hague

"none":

  1. Amsterdam
  2. Rotterdam
  3. The Hague

[edit] Starting value

A starting value (in decimal form) can be specified (naturally this has no effect if the prefix does not depend on the item's position in the list):

<ol start="2">
<li>Amsterdam</li>
<li>Rotterdam</li>
<li>The Hague</li>
</ol>

gives

  1. Amsterdam
  2. Rotterdam
  3. The Hague

Similarly for the different style types and a starting value of 2:

list-style-type: lower-alpha

  1. Amsterdam
  2. Rotterdam
  3. The Hague

list-style-type: upper-alpha

  1. Amsterdam
  2. Rotterdam
  3. The Hague

List-style-type: lower-roman

  1. Amsterdam
  2. Rotterdam
  3. The Hague

List-style-type: upper-roman

  1. Amsterdam
  2. Rotterdam
  3. The Hague

[edit] Comparison with a table

Apart from providing automatic numbering, the numbered list also aligns the contents of the items, comparable with using table syntax:

<ol start="9">
<li>Amsterdam</li>
<li>Rotterdam</li>
<li>The Hague</li>
</ol>

gives

  1. Amsterdam
  2. Rotterdam
  3. The Hague
<table>
<col span="2" />
<tr><td align="right">9.</td><td>Amsterdam</td></tr>
<tr><td align="right">10.</td><td>Rotterdam</td></tr>
<tr><td align="right">11.</td><td>The Hague</td></tr>
</table>

gives

9. Amsterdam
10. Rotterdam
11. The Hague

This non-automatic numbering has the advantage that if a text refers to the numbers, insertion or deletion of an item does not disturb the correspondence.

[edit] See also