Web design development. Everything about ordered lists

Like an unordered list, ordered lists are a collection of elements displayed to the user. While unordered lists have a bullet symbol ("•") in front of each item, ordered lists have a number. The first item is always number one, and each successive item causes that value to be incremented by one. A simple ordered list might look like this:

Pink Floyd
Alanis Morsette
Rush

An ordered list is contained within the <OL> (ordered list) tag. Like an unordered list, each element in the list is denoted by an <LI> tag. The ending element for the ordered list, </OL>, is required; the ending tag for each item, </LI>, can be safely omitted. The HTML to create this sample ordered list is:

<ol>

  <li>Item one

  <li>Item two

  <li>Item three

</ol>

Like unordered lists, ordered lists cause a <P> like break in the surrounding text flow, with a line of space before and after the list. Elements within the list are kept close together. If you want to create space between the list elements, add a <P> to the end of each item in the list, before the next <LI> tag.

Controlling the sequence

Sometimes, lists that start at one and go up aren't always exactly what you want. HTML helps a little bit, allowing you to change the starting value for a list using the start attribute with the <OL> tag. Here is our sample list starting with 9:

Pink Floyd
Alanis Morsette
Rush

Unfortunately, you cannot change the increment value, so each item is one more than the preceding item. As a work around, you can change the value of a single item in the list, by adding the value attribute to any <LI> tag. Here is a list, starting at 9 and counting by 3:

Item one
Item two
Item three

And here is the HTML for the list:

<ol start=9>

  <li>Item one

  <li value=12>Item two

  <li value=15>Item three

</ol>

While the desired effect is achieved, you've created a list that is more difficult to maintain. If you insert or delete items in the list, you must manually update the items to keep the count correct.

If you change the value of just one <LI> item, subsequent items continue to increment by one, starting with that value. This is useful for creating gaps in a list that otherwise increments each item by one.

Nested ordered lists

You can nest ordered lists, and the browser will correctly handle indentation and list numbering. Each list has its own numbering sequence, independent of the others. Here are some nested ordered lists:

Pink Floyd
Alanis Morsette

Level two, Pink Floyd
Level two, Alanis Morsette

Level three, Pink Floyd
Level three, Alanis Morsette

Level four, Pink Floyd
Level four, Alanis Morsette
Level four, Rush

Level three, Rush

Level two, Rush

Rush

This is correct using the HTML standard, but not at all what most people want when nesting ordered lists. The effect is less than what you expected being; nested lists pick up the numbering of the containing element, so that the second level in our example would be 2.1, 2.2, and so forth, and the third element of the fourth level would be numbered 2.2.2.3.

This is simply not possible in an automated fashion with HTML. You can number items by hand, with all the maintenance issues, or you could use custom JavaScript routines to determine item numbers on the fly and emit the appropriate number dynamically. Either way, it would be nice if the next HTML standard implemented nested ordered lists the way they were meant to be.

<< BACK

Dealing With Font: Ordered Lists