Lists, Lists, and More Lists
You can customize ordered lists in two main ways: how they're numbered and the number with which
the list starts. HTML 3.2 provides the
type attribute that can take one of five values to define which type
of numbering to use on the list:
● "1" Specifies that standard Arabic numerals should be used to number the list (that is, 1, 2, 3, 4,
and so on)
● "a" Specifies that lowercase letters should be used to number the list (that is, a, b, c, d, and so
on)
● "A" Specifies that uppercase letters should be used to number the list (that is, A, B, C, D, and so
on)
● "i" Specifies that lowercase Roman numerals should be used to number the list (that is, i, ii,
iii, iv, and so on)
● "I" Specifies that uppercase Roman numerals should be used to number the list (that is, I, II,
III, IV, and so on)
You can specify types of numbering in the
<ol> tag, as follows: <ol type="a">. By default, type="1" is
assumed.
Note
The nice thing about web browsers is that they generally ignore attributes they don't
understand. If a browser didn't support the
type attribute of the <ol> tag, for example, it
would simply ignore it when it's encountered.

As an example, consider the following list:
<p>The Days of the Week in French:</p>
<ol>
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
<li>Jeudi</li>

<li>Vendredi</li>
<li>Samedi</li>
<li>Dimanche</li>
</ol>

If you were to add type="I" to the <ol> tag, as follows, it would appear in a browser as shown in Figure
4.5.
Input
<p>The Days of the Week in French:</p>
<ol type="I">
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
<li>Jeudi</li>
<li>Vendredi</li>
file:///G|/1/0672328860/ch04lev1sec5.html (4 von 13) [19.12.2006 13:48:34]
Lists, Lists, and More Lists
<li>Samedi</li>
<li>Dimanche</li>
</ol>

Output
Figure 4.5. An ordered list displayed using an alternative numbering style.

You also can apply the type attribute to the <li> tag, effectively changing the numbering type in the
middle of the list. When the
type attribute is used in the <li> tag, it affects the item in question and all
entries following it in the list. Using the
start attribute, you can specify the number or letter with which
to start your list. The default starting point is

1, of course. You can change this number by using start.
<ol start="4">, for example, would start the list at number 4, whereas <ol type="a" start="3"> would
start the numbering with
c and move through the alphabet from there.
For example, you can list the last six months of the year, and start numbering with the Roman numeral
VII as follows. The results appear in Figure 4.6.
Input
<p>The Last Six Months of the Year (and the Beginning of the NextYear):</p>
<ol type="I" start="7">
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
<li type="1">January</li>
</ol>

Output
Figure 4.6. An ordered list with an alternative numbering style and starting
file:///G|/1/0672328860/ch04lev1sec5.html (5 von 13) [19.12.2006 13:48:34]
Lists, Lists, and More Lists
number.

As with the type attribute, you can change the value of an entry's number at any point in a list. You do
so by using the
value attribute in the <li> tag. Assigning a value in an <li> tag restarts numbering in
the list starting with the affected entry.
Suppose that you wanted the last three items in a list of ingredients to be
10, 11, and 12 rather than 6,

7, and 8. You can reset the numbering at Eggs using the value attribute, as follows:
<p>Cheesecake ingredients:</p>
<ol type="I">
<li>Quark Cheese</li>
<li>Honey</li>
<li>Cocoa</li>
<li>Vanilla Extract</li>
<li>Flour</li>
<li value="10">Eggs</li>
<li>Walnuts</li>
<li>Margarine</li>
</ol>

Note
In this section's examples, all the attribute values are enclosed in quotation marks. Most
web browsers don't require you to use quotation marks this way, but XHTML 1.0 does.

Unordered Lists
In unordered lists, the elements can appear in any order. An unordered list looks just like an ordered list
in HTML except that the list is created by using
<ul> </ul> tags rather than ol. The elements of the
list are placed within
<li> tags, just as with ordered lists.
file:///G|/1/0672328860/ch04lev1sec5.html (6 von 13) [19.12.2006 13:48:34]
Lists, Lists, and More Lists
Browsers usually format unordered lists by inserting bullets or some other symbol; Lynx, a text browser,
inserts an asterisk (
*).
The following input and output example shows an unordered list.
Figure 4.7 shows the results in a

browser.
Input
<p>Things I like to do in the morning:</p>
<ul>
<li>Drink a cup of coffee</li>
<li>Watch the sunrise</li>
<li>Listen to the birds sing</li>
<li>Hear the wind rustling through the trees</li>
<li>Curse the construction noises for spoiling the peaceful mood</li>
</ul>

Output
Figure 4.7. An unordered list.

Customizing Unordered Lists
As with ordered lists, unordered lists can be customized with HTML 3.2 attributes. (These are also
deprecated in HTML 4.01.) By default, most browsers, including Netscape and Internet Explorer, use
bullets to delineate entries on unordered lists. Text browsers such as Lynx generally opt for an asterisk.
If you use the
type attribute in the <ul> tag, some browsers can display other types of markers.
According to the HTML 3.2 specification, the
type attribute can take three possible values:
● "disc" A disc or bullet; this style is the default.
● "square" Obviously, a square rather than a disc.
● "circle" As compared with the disc, which most browsers render as a filled circle, this value
should generate an unfilled circle.
In the following input and output example, you see a comparison of these three types as rendered in a
file:///G|/1/0672328860/ch04lev1sec5.html (7 von 13) [19.12.2006 13:48:34]
Lists, Lists, and More Lists
browser (see Figure 4.8).

Input
<ul type="disc">
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
<ul type="square">
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>
<ul type="circle">
<li>DAT - Digital Audio Tapes</li>
<li>CD - Compact Discs</li>
<li>Cassettes</li>
</ul>

Output
Figure 4.8. Unordered lists with different bullet types.

Just as you can change the numbering scheme in the middle of an ordered list, you can change the type
of bullet midstream in a list by using the
type attribute in the <li> tag. Again, this attribute is
deprecated in HTML 4.01.
An alternative approach is to use style declarations to specify the bullet type for a list or list item. The
property to set is
list-style-type. To change the style from disc (the default) to square, you would use
the following tag:
<ol style="list-style-type: square">
</ol>

file:///G|/1/0672328860/ch04lev1sec5.html (8 von 13) [19.12.2006 13:48:34]
Lists, Lists, and More Lists

The list-style-type property is also used to control the numbering style used for ordered lists. The
valid values are
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and
none. If you set it to none, no bullet or numbering will be shown for the list.
You can also alter this property for individual items in a list. For example, you could create a list like this:
<ol style="list-style-type: circle">
<li style="list-style-type: square">One</li>
<li style="list-style-type: disc">Two</li>
<li>Three</li>
</ol>

There are a number of other properties associated with lists. The list-style-type property simply
provides an alternative to the deprecated
type attribute. With CSS, you can go much further. For
example, using the
white-space property, you can define how white space is handled when lists are
rendered. By default, a line break follows every list item.
You can change that to
pre, which prints the text exactly as it is formatted in the source, or nowrap,
which leaves out the line breaks.
If you don't like any of the bullet styles used in unordered lists, you can substitute an image of your own
choosing in place of them. To do so, use the
list-style-image property. By setting this property, you
can use an image of your choosing for the bullets in your list. Here's an example:
<ul style="list-style-image: url(/bullet.gif)">
<li>Example</li>
</ul>


Don't worry much about what this all means right now. I'll discuss images later in Lesson 7, "Adding
Images, Color, and Backgrounds." Right now, all you need to know is that the URL in parentheses
should point to the image you want to use.
As you've seen in the screenshots so far, when items are formatted in a list and the list item spans more
than one line, the lines of text that follow the first are aligned with the beginning of the text on the first
line. If you prefer that they begin at the position of the bullet or list number, use the
list-style-
position
property:
<ul style="list-style-position: inside">
<li>Example</li>
</ul>

The default value is outside, and the only alternative is inside. Finally, if you want to modify several list-
related properties at once, you can simply use the
list-style property. You can specify three values for
list-style: the list style type, the list style position, and the URL of the image to be used as the bullet
style. This property is just a shortcut for use if you want to manipulate several of the list-related
properties at once. Here's an example:
file:///G|/1/0672328860/ch04lev1sec5.html (9 von 13) [19.12.2006 13:48:34]
Lists, Lists, and More Lists
<ul style="list-style: circle inside URL(/bullet.gif)">
<li>Example</li>
</ul>

Bear in mind that not all browsers support the manipulation of these propertiesin particular, older
browsers almost certainly don't.
Glossary Lists
Glossary lists are slightly different from other lists. Each list item in a glossary list has two parts:

● A term
● The term's definition
Each part of the glossary list has its own tag:
<dt> for the term (definition term), and <dd> for its
definition (definition definition).
<dt> and <dd> usually occur in pairs, although most browsers can handle
single terms or definitions. The entire glossary list is indicated by the tags
<dl> </dl> (definition list).
The following is a glossary list example with a set of herbs and descriptions of how they grow:
<dl>
<dt>Basil</dt>
<dd>Annual. Can grow four feet high; the scent of its tiny white
flowers is heavenly</dd>
<dt>Oregano</dt>
<dd>Perennial. Sends out underground runners and is difficult
to get rid of once established.</dd>
<dt>Coriander</dt>
<dd>Annual. Also called cilantro, coriander likes cooler
weather of spring and fall.</dd>
</dl>

Glossary lists usually are formatted in browsers with the terms and definitions on separate lines, and the
left margins of the definitions are indented.
You don't have to use glossary lists for terms and definitions, of course. You can use them anywhere
that the same sort of list is needed. Here's an example:
<dl>
<dt>Macbeth</dt>
<dd>I'll go no more. I am afraid to think of
what I have done; look on't again I dare not.</dd>
<dt>Lady Macbeth</dt>

<dd>Infirm of purpose! Give me the daggers.
The sleeping and the dead are as but pictures. 'Tis the eye
if childhood that fears a painted devil. If he do bleed, I'll
gild the faces if the grooms withal, for it must seem their
guilt. (Exit. Knocking within)</dd>
<dt>Macbeth</dt>
<dd>Whence is that knocking? How is't wit me when
every noise apalls me? What hands are here? Ha! They pluck out
mine eyes! Will all Neptune's ocean wash this blood clean from
file:///G|/1/0672328860/ch04lev1sec5.html (10 von 13) [19.12.2006 13:48:34]
Lists, Lists, and More Lists
my hand? No. This my hand will rather the multitudinous seas
incarnadine, making the green one red. (Enter Lady Macbeth)</dd>
<dt>Lady Macbeth</dt>
<dd>My hands are of your color, but I shame to
wear a heart so white.</dd>
</dl>

The following input and output example shows how a glossary list is formatted in a browser (see Figure
4.9).
Input
<dl>
<dt>Basil</dt>
<dd>Annual. Can grow four feet high; the scent
of its tiny white flowers is heavenly.</dd>
<dt>Oregano</dt>
<dd>Perennial. Sends out underground runners
and is difficult to get rid of once established.</dd>
<dt>Coriander</dt>
<dd>Annual. Also called cilantro, coriander

likes cooler weather of spring and fall.</dd>
</dl>

Output
Figure 4.9. A glossary list.

Nesting Lists
What happens if you put a list inside another list? Nesting lists is fine as far as HTML is concerned; just
put the entire list structure inside another list as one of its elements. The nested list just becomes
another element of the first list, and it's indented from the rest of the list. Lists like this work especially
well for menu-like entities in which you want to show hierarchy (for example, in tables of contents) or as
outlines.
Indenting nested lists in HTML code itself helps show their relationship to the final layout:
file:///G|/1/0672328860/ch04lev1sec5.html (11 von 13) [19.12.2006 13:48:34]
Lists, Lists, and More Lists
<ol>
<ul>
<li>WWW</li>
<li>Organization</li>
<li>Beginning HTML</li>
<ul>
<li>What HTML is</li>
<li>How to Write HTML</li>
<li>Doc structure</li>
<li>Headings</li>
<li>Paragraphs</li>
<li>Comments</li>
</ul>
<li>Links</li>
<li>More HTML</li>

</ol>

Many browsers format nested ordered lists and nested unordered lists differently from their enclosing
lists. They might, for example, use a symbol other than a bullet for a nested list, or number the inner
list with letters (
a, b, c) rather than numbers. Don't assume that this will be the case, however, and
refer back to "section 8, subsection b" in your text because you can't determine what the exact
formatting will be in the final output. If you do need to be sure which symbols or numbering scheme will
be used for a list, specify a style using CSS.
The following input and output example shows a nested list and how it appears in a browser (see
Figure
4.10).
Input
<h1>Peppers</h1>
<ul>
<li>Bell</li>
<li>Chile</li>
<ul>
<li>Serrano</li>
<li>Jalapeno</li>
<li>Habanero</li>
<li>Anaheim</li>
</ul>
<li>Szechuan</li>
<li>Cayenne</li>
</ul>

Output
Figure 4.10. Nested lists.
file:///G|/1/0672328860/ch04lev1sec5.html (12 von 13) [19.12.2006 13:48:34]

Lists, Lists, and More Lists

DO DON'T
DO remember that you can change the
numbering and bullet styles for lists to suit your
preference.
DON'T use the deprecated list types; use one of
the other lists instead.
DO feel free to nests lists to any extent that you
like.
DON'T number or format lists yourself; use the
list tags.
DON'T use list tags to indent text on a page;
use Cascading Style Sheets.



file:///G|/1/0672328860/ch04lev1sec5.html (13 von 13) [19.12.2006 13:48:34]