Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Creating numbered lists

To create a numbered list, you need to add the <ol> and the </ol> tag at the beginning and the end of the list.

You then use the <li> and </li> tags to add the items in the list. For example:

This HTML…

Displays as…

<ol>
<li>Step One</li>
<li>Step Two</li>
<li>Step Three</li>
</ol>

Ordered lists are sequentially numbered or lettered. To set the style of numbering or lettering, use the type attribute in the <ol> tag. You choose to use numbers (1,2,3..), lower or upper case letters (a, b, c… A, B, C…) or lower and upper case roman numerals (i, ii, iii… I, II, III). To change the numbering for individual items in a list, add the type attribute to the <li> tag.

This HTML…

Displays as…

<ol>
<li type="1">Bulleted Lists</li>
<li type="a">Ordered Lists</li>
<li type="A">Directory Lists</li>
<li type="i">Itemized Lists</li>
<li type="I">Definition Lists</li>
</ol>

Use the start attribute to set the initial number or letter. By default, the style is decimal numbers starting at 1. To make a list start at number 5, just add start="5" to the <ol> tag. Subsequent items number 6, 7, 8 and so on. You can't change the numbering to automatically increment by anything other than one.

If you want to change the number for individual list items, add value="n" to the <li> tag. Once again, the following items number sequentially. To get the list to go up in tens, you would have to add the value to each list item. For example:

This HTML…

Displays as…

<ol>
<li value="10">Line 10</li>
<li value="20">Line 20</li>
<li value="30">Line 30</li>
</ol>

Like a bulleted list, you must always finish the list with the </ol> tag but you can miss off the </li> tag.