If the items in your list should follow a specific order, as in recipes or instructions, you want to use the ordered list tag (<ol>). With this tag, HTML automatically numbers or letters your items for you. Here's an example: <ol><li>first item in the list</li> <li>second item in the list</li> <li>third item in the list</li></ol> Notice how similar the two list samples are. Both the <ul> and <ol> tags call for the individual list items to be identified with the <li> tag. Like the <ul> tag, HTML has an automatic style for the list items within the <ol> tag. HTML automatically numbers the items with the familiar Arabic numerals (1, 2, 3, and so on). What's more, it automatically renumbers the list items if you decide to add or delete items later. Once again, Figure 6.1 has an example of this type of list. Formatting Numbered ListsYou can use style sheets for formatting ordered lists. In addition to the standard Arabic numerals, there are four other styles that can be applied to your ordered list. Table 6.1 describes each of those types, and the following sample HTML shows how you can use style sheets to create a list ordered by lowercase roman numerals. Figure 6.1 shows an example of such a list in the Web browser. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Bullet Options</title> <style type="text/css"> ol.lwroman {list-style-type:lower-roman} </style> </head> <body> <ol > <li>a list item</li> <li>another list item</li> </ol> </body> </html>
Setting a Start ValueThere might be times when you'd like to start an ordered list with a number other than one. Many times when writing instructions, you need to interrupt a numbered list with some other material (such as text or examples), and then continue with the numbered list. To do this in HTML, close the first list, add the additional materials that you need, and then start a new list, using the list item's value attribute to set the beginning number for the new list. Figure 6.2 demonstrates how the following code is interpreted by the browser. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Ordered Lists</title> <style type="text/css"> </style> </head> <body> <p>It's Payday!</p> <ol> <li>Turn in your timecard.</li> <li>Receive your paycheck.</li> <li>Endorse your paycheck.</li> </ol> <p>Congratulations! You're almost there.</p> <ol> <li value="4">Put the check in the bank.</li> </ol> </body> </html> Figure 6.2. The Web browser shows an ordered list that was interrupted and started again using the value attribute.Caution
|