WEB DESIGN GARAGE [Electronic resources]

Chapter 52. Building Lists

In HTML, there are two kinds of lists: ordered (or numbered) lists and unordered (or bulleted) lists. The markup for a list begins with either the ol or ul tag for ordered and unordered lists, respectively, followed by a series of li tags for each item in the list. See Figure 52.1 for examples of both types of lists.

Listing 52.1. View Source for Figure 52.1.

<table>
<tr>
<td>
<!-- Ordered list begins here -->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ol>
<!-- Ordered list ends here -->
</td>
<td>
<!-- Unordered list begins here -->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
<li>Fifth item</li>
</ul>
<!-- Unordered list ends here -->
</td>
</tr>
</table>

As you can see, the HTML code for the lists is exactly the same, with the exception of the list tag. Therefore, changing an ordered list to an unordered list is a simple matter of changing the ul tag to an ol tag.

Notice also that you don't have to type the numbers in an ordered list. The browser keeps track of them for you and displays them automatically.

In a surprise turn of events for the topics in this section, HTML gives you a number of handy attributes for controlling list appearance. Table 52.1 summarizes them.

^[*] In ordered lists other than standard decimal numbered lists, the start attribute indicates the nth value in the sequence. So an alphabetical list with a start value of 4 begins with the letter D, since D is the fourth letter of the alphabet. Likewise, a list with Roman numerals begins with X (ten) when the start value equals 10.