Creating Ordered and Unordered Lists

The ordered list is perfect for providing step-by-step instructions on how to complete a particular task or for creating an outline (complete with links to corresponding sections, if desired) of a larger document. You may create an ordered list anywhere in the body section of your HTML document.

Unordered lists are probably the most widely used lists on the Web. Use them to list any series of items that have no particular order, such as interesting Web sites or names.

Tips

Unless you specify otherwise (see page 218), items in ordered lists will be numbered with Arabic numerals (1, 2, 3, etc.) (Figure 15.2).

Figure 15.2. This list uses the default Arabic numerals to create a numbered list.

Figure 15.3. The list items of unordered lists are identical to those for ordered lists. Only the ul tag is different.
Items in unordered lists have solid round bullets by default (Figure 15.4). You can choose different bullets (see page 218) or even create your own (see page 220).

Figure 15.4. Unordered lists have round, solid bullets by default.
Keep the text in your list items short. If you have more than a few lines of text in each item, you may have better luck using headers (H1, h2, etc.) and paragraphs (p).
Inserting a line break (br) in a list item breaks the text to the next line, but maintains the same indenting.
No text is permitted between the opening ol or ul tag and the first li tag. Nevertheless, browsers will display such text with the same indentation as the first item in the list, but without a bullet.
The ul tag is often used for indentation, though this is considered a hack from the pre-standards era.
You may create one list inside another, even mixing and matching ordered and unordered lists. Be sure to nest each list properly, using all the required opening and closing tags.
Lists are automatically indented from the left margin (40 pixels is typical for the default 16 pixel size text). If you use CSS to style your lists, changing or reducing the left margin may make your bullets disappear beyond the left edge of the window.

Creating Ordered and Unordered Lists

Figure 15.1. There is no official way to format a list's title. You can use a regular header (see page 61).

Figure 15.2. This list uses the default Arabic numerals to create a numbered list.

Figure 15.3. The list items of unordered lists are identical to those for ordered lists. Only the `ul` tag is different.

Figure 15.4. Unordered lists have round, solid bullets by default.

Creating Ordered and Unordered Lists

Figure 15.1. There is no official way to format a list's title. You can use a regular header (see page 61).

Figure 15.2. This list uses the default Arabic numerals to create a numbered list.

Figure 15.3. The list items of unordered lists are identical to those for ordered lists. Only the ul tag is different.

Figure 15.4. Unordered lists have round, solid bullets by default.

Figure 15.3. The list items of unordered lists are identical to those for ordered lists. Only the `ul` tag is different.