The ol tag is used for creating an Ordered List, which is a list with items in a particular order. Numbers or letters are usually used to indicate the order. You can create a simple ordered list like this:

<ol>
<li>John Doe</li>
<li>Jane Doe</li>
<li>...and all the others</li>
</ol>

The result will look something like this:

1. John Doe
2. Jane Doe
3. ...and all the others

As you can see, we use the <li> tag. It simply tells the browser that the containing text is a list item. Everything within a set of <ol> tags should be list items.

The type attribute

The most interesting attribute of the ol tag, is the type attribute. It allows you to define which kind of bulletpoints you want. Click the type link, for a list of possible values. Here's an example where we use letters instead of the default numbers:

<ol type="A">
<li>John Doe</li>
<li>Jane Doe</li>
<li>...and all the others</li>
</ol>

The result looks like this:

1. John Doe
2. Jane Doe
3. ...and all the others

Unfortunately, the type attribute has been deprecated. If you wish to create pages which validates, you should use the CSS alternative list-style-type instead:

<ol style="list-style-type: A;">
<li>John Doe</li>
<li>Jane Doe</li>
<li>...and all the others</li>
</ol>

In general, CSS offers you a lot of options for styling you list. You can play around with the following CSS properties:

• list-style-image
• list-style-position
• list-style-type

The start attribute

The start attribute can be used to define where in the number/letter sequence you wish to start. This is practial in several situations, for instance when you wish to create a long list, which are divided into several pages or sections. Here is an example of how to use it:

<ol type="1" start="5">
<li>John Doe</li>
<li>Jane Doe</li>
<li>...and all the others</li>
</ol>

5. John Doe
6. Jane Doe
7. ...and all the others

Unfortunately, the start attribute has been deprecated, and there are no real CSS alternative, at least not one that will work in all the major browsers. For now, you will have to workaround the issue in other ways, for instance by using JavaScript, or accept the validation error. The start attribute still works in pretty much any browser.

© htmlpedia.net 2008 - 2012