HTML <ol> Ordered List Tag Reference

The <ol> HTML/xHTML tag

The Ordered List <ol> tag creates a list that may contain a number of list items / elements (<li></li>).

In normal text in a visual browser, an ordered list will render as a stacked list, similar to an unordered list, but with numbered or lettered items instead of simple bullets.

When to use the <ol> tag (semantic use)

Use ordered lists wherever you have a sequence of related items that deserves to be described as a list, and whose order is significant.

When is order significant? One example is my top ten list below. Another may be when you say, “There are 3 good reasons for using semantic HTML..” and then go on to state those reasons in a list. The ordering there helps the reader keep track of where they are in the list. There are lots more applications in legal, scientific, and other formal types of content.

Do not use an when the order of elements is not important. Use an unordered list (<ul> ) instead.

The tag is valid in all current versions of HTML and xHTML, and it should always have a closing </ol> tag.

An ordered list may contain only list item (<li></li>) tags, but these may contain other content and HTML elements.

Example of <ol> tag use

Here’s a simple example. The style=”list-style:roman;” tells the list to display with regular decimal numbers. Here’s a full list of other list-style options.

Looks like…

1. Web Design from Scratch
2. A List Apart
3. Google
4. UseIt.com
5. digg.com
6. del.icio.us
7. Save the Pixel
8. Basecamp
9. Slashdot
10. Smashing Magazine

Alternatives to the <ol> tag

You may also consider using:

Unrdered lists

Use a <ul> tag where the order of items is not significant.

Definition lists

Use a <dl> where the list is comprised entirely of pairs of elements, with a title or name together with a description or definition.