Fandom

HTML Wiki

Ordered list

69pages on
this wiki
Add New Page
Talk0 Share
Smallwikipedialogo.png This page uses content from Wikipedia. The original article was at Ordered list. The list of authors can be seen in the page history. As with HTML Wiki, the text of Wikipedia is available under the GNU Free Documentation License.

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


List style types Edit

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

Starting value Edit

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

Comparison with a tableEdit

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.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.