A Complete Guide to Web Design

120 Chapter 7 – Formatting Text

Lists

Web Design in a Nutshell, eMatter Edition

If you want to use your own graphic as the bullet for a list, you would need to

simulate a list using a table for alignment, since the HTML list tags provide no way

to turn off the automatic bulleting or to introduce custom characters. (See

Chapter 10.)

Ordered (Numbered) Lists

Ordered lists are used when the sequence of the items is important. They are

displayed on an indent, with a number (automatically inserted by the browser)

preceding each list item. You do not type the numbers into your HTML source

code.

Ordered lists follow the same basic structure as unordered lists: the entire list is

contained within the<ol>and</ol>tags and each individual list item is indi-

cated with an<li> tag.

Figure 7-7 shows the structure and display of a simple ordered list.

Changing the numbering scheme

The type attribute can be used within ordered lists to specify the style of

numbering. There are five possible values: 1 (numbers), A (uppercase letters), a

(lowercase letters), I (uppercase roman), and i (lowercase roman). The value “1” is

the default and is shown in Figure 7-7. Figure 7-8 shows the code and displays of

the other four settings.

As with unordered lists, you can use the type attribute within individual<li>tags

to mix-and-match styles within a list.

Figure 7-6: Changing the bullet type within list items

Figure 7-7: A simple ordered list

<B>Shopping List</B>

<UL>

<LI TYPE=disc>Avocados

<LI TYPE=circle>Tomatoes

<LI TYPE=square>Scallions

</UL>

<B>Preparation</B>

<OL>

<LI>Dice the avocados

<LI>Peel and seed tomatoes

<LI>Finely slice the scallions

<LI>Mix in the black beans

</OL>