Ordered (Numbered) Lists - HTML

Ordered lists have elements that are preceded by numbers or letters and are meant to provide a sequence of ordered steps for an activity. For example, this book uses numbered lists when stepping the reader through a process. Such a list might resemble the following:

1. In Internet Explorer, open the Web page that displays the graphic you wish to use as wallpaper for your desktop.
2. Right-click the image to open the context menu.
3. Choose Set as Background to save the image and use it as your desktop wallpaper.

Ordered lists use the ordered list tag (<ol>) to delimit the entire list and the list item tag (<li>) to delimit each individual list item.

In the preceding example, the list has three elements numbered with Arabicnumbers. This is the default for ordered lists in HTML, as shown in the followingcode, whose output is shown . The default ordered list uses Arabic numbers for its items

The default ordered list uses Arabic numbers for its items

To specify a different type of identifier for each item, you would use the list-style attribute and define a style for the list, as shown in the following code:

This code results in the list items being prefaced with uppercase letters.
The upper-alpha value of the list-style attribute causes the ordered list elements to be prefaced with uppercase letters.

Note Using letters or Roman numerals only makes sense for organizational lists (outlines, and so on), not for lists that outline a series of steps—especially if the steps must be followed in order.
The list-style-type property supports the following values in CSS2:

• decimal
• decimal-leading-zero
• lower-roman
• upper-roman
• lower-greek
• upper-alpha
• upper-latin
• hebrew
• armenian
• georgian
• cjk-ideographic
• hiragana
• katakana
• hiragana-iroha
• katakana-iroha
• none

Note Some of the list-style-types are font-dependent—that is, they are only supported on certain fonts. If you are using a type such as hiragana with a Latin-based font, you will not get the results you intend. The list-style-types are self -explanatory.

The default type is typically decimal, but can be defined by the individual client browser. Keep in mind that your document’s font and language options must support the language character sets used by the list-type. Ordered lists also support the list-style-position property. This property controls where the number or character preceding each item appears. The property has two possible values:

• Outside—The number or character appears outside the left margin of the item text.
• Inside—The number or character appears inside the left margin of the item text.

The default is outside, and the difference between the two options is shown in

The list-style-position property controls where the list item numbers/characters appear—outside or inside the list item margins.

Changing the Start Value of Ordered Lists
Previous versions of HTML allowed the use of the start attribute in the <ol> tag to control what number or letter the list began with. For example, the following code starts a list with the decimal number 12: <ol start=“12” style=“list-style: decimal;”> However, the start attribute of the <ol> tag was deprecated, and a replacement CSS style has yet to be defined. Although you can use the start attribute, your document will no longer validate against strict HTML.

If you find yourself needing consistent, yet flexible numbering, consider using the new CSS2 automatic counters and numbering feature. This feature uses the content property along with the new counter-increment and counter-reset properties to provide a flexible yet powerful automatic counter function.

The following style code will define a counter and cause any <ol> list to begin with an item number of 12:

This code introduces quite a few CSS2 concepts—pseudo-elements, counters, and related properties and methods. However, it isn’t as complex as it might first appear:

The ol definition causes the counter (list) to be reset to 11 every time the <ol> tag is used—that is, at the beginning of every ordered list.

• The li definition sets the list style type to none—the counter will display our number; if we left the list style type set to decimal, there would be an additional number with each item.
• The li:before definition does two things: 1) causes the counter to be displayed before the item (using the begin pseudo-element and the content property) along with a period and a space; 2) increments the counter. Note that the counter increment happens first, before the display. That is the reason you need to reset the counter to one lower than your desired start.

Using the preceding styles along with the following list code in a document results in a list with items numbered 12-15:

Counters are a new, powerful feature of CSS2. Unfortunately, at the time of this writing, only the Opera browser fully supports counters. However, the other browsers are sure to follow suit. You’ll find more information on counters and the content property

list-style: <list-style-type> <list-style-image>

<list-style-position>
You can use this one property to specify one, two, or all three list-style properties in one declaration. For example, to define an ordered list with lowercase letters and inside positioning, you could use the following tag: