4.2. Ordered (Numbered) Lists

Ordered lists have a simple format, but many options can be used to customize their appearance in a document. Each ordered list is encapsulated in ordered list tags (<ol>), and each item within the list is encapsulated in list item tags (<li>), as shown in this example:

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

The default numbering method uses Arabic numbers. When rendered in a user agent, this basic list resembles that shown in Figure 4-1.

Figure 4-1. Figure 4-1

Previous versions of HTML did not require the closing item tag (</li>). However, as you should know by now, XHTML requires each tag to have a closing mate. Therefore, it is important always to close your list items with an appropriate tag.

4.2.1. Changing the Number Style

To change the numbering method for the list, you would use the list-style-type property to define the style you want for the numbers.

Example: Using Letters for an Ordered List

This example shows how to use the list-style-type property to change an ordered list's ordinal to uppercase letters.

Source

The source code for the list would resemble the following code. Note the use of the style attribute in the <ol> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html> <head> <title>Example Ordered List - Letters</title> </head> ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial