Text in Lists
When you present information on paper (or with a
good old-fashioned overhead projector) you probably often include lists of numbered steps
or "bullet points." You've also undoubtedly written many indented lists to
organize information such as terms and their definitions or the outline of a business
plan. Because lists are so common, HTML provides tags which automatically indent text and
add numbers or bullets in front of each listed item.
In this chapter, you'll find out how to format
numbered lists, bulleted lists, and a variety of other indented lists. You will also see
how the HTML tags for creating lists can be used for almost any other type of indentation
you want on your Web pages. To Do: You can make the most of this chapter if you have some
text that needs to be indented correctly to be presentable.
- Any type of outline, "bullet points" from a
presentation, numbered steps, glossary, or list of textual information from a database
will serve as good material to work with.
- If the text you'll be using is from a word processor
or database program, be sure to save it to a new file in plain text or ASCII format. You
can then add the appropriate HTML tags to format it as you go through this chapter.
Types of HTML Lists
There are three basic types of HTML lists. All three
are shown in Figure 7.2, and Figure 7.1 reveals the HTML to construct them:
- The numbered list at the top is called an ordered
list. It begins with the <OL> tag and ends with a closing </OL>
tag. Numbers and line breaks appear automatically at each <LI> tag, and the
entire list is indented.
- The bulleted list is called an unordered list. It
opens with the <UL> tag and closes with </UL>. It looks just
like an ordered list, except that bullets appear at each <LI> tag instead
- The list of terms and their meanings is called a
definition list. It starts with the <DL> tag and ends with </DL>.
The <DT> tag goes in front of each term to be defined, with a <DD>
tag in front of each definition. Line breaks and indentation appear automatically.
New Term: Ordered lists are indented lists
that have numbers or letters in front of each item.
New Term: Unordered lists are indented lists
with a special bullet symbol in front of each item.
New Term: Definition lists are indented lists
without any number or symbol in front of each item.
Just A Minute: Remember that different Web
browsers can display Web pages quite differently. The HTML standard doesn't specify
exactly how Web browsers should format lists, so people using older Web browsers may not
see the same indentation that you see. Software of the future may also format HTML lists
differently, though all current Web browsers now display lists in almost exactly the same
Figure 7.1. Use <OL> and <LI>
for ordered lists, <UL> and <LI> for unordered lists, and <DL>,
<DT>, and <DD> for definition lists.
Figure 7.2. The three types of HTML lists, as they
appear in Netscape Navigator.
Although definition lists are officially supposed to
be used for defining terms, many Web page authors use them anywhere they'd like to see
some indentation. In practice, you can indent any text simply by putting <DL><DD>
at the beginning of it and </DL> at the end.
You can indent items further by nesting one list
inside another, like this:
<DL><DD>This item will be indented
<DL><DD>This will be indented further
<DL><DL><DD>And this will be indented very far indeed
Just make sure you always have the same number of
closing </DL> tags as opening <DL> tags.
Ordered and unordered lists can also be nested
inside one another, down to as many levels as you wish. In Figure 7.3, a complex indented
outline is constructed from several unordered lists. You'll notice in Figure 7.4 that
Netscape Navigator automatically uses a different type of bullet for each of the first
three levels of indentation, making the list very easy to read.
Figure 7.3. You can build elaborate outlines by
placing lists within lists.
As shown in Figure 7.4, Netscape Navigator will
normally use a solid disc for the first-level bullet, a hollow circle for the second-level
bullet, and a solid square for all deeper levels. However, you can explicitly choose which
type of bullet to use for any level by using <UL TYPE="disc">, <UL
TYPE="circle">, or <UL TYPE="square"> instead
You can even change the bullet for any single point
in an unordered list by using the TYPE attribute in the <LI> tag.
For example, the following would display a hollow circle in front of the words
"Extra" and "Super," but a solid square in front of the word
Figure 7.4. Multi-level unordered lists are neatly
indented and bulleted for readability.
Just A Minute: Netscape Navigator is the only
Web browser that currently lets you control the appearance of list bullets. All bullets
will appear as solid discs in Microsoft Internet Explorer 3.0.
The TYPE attribute also works with ordered
lists, but instead of choosing a type of bullet you choose the type of numbers or letters
to place in front of each item. Figure 7.5 shows how to use roman numerals (TYPE="I"),
capital letters (TYPE="A"), and lowercase letters (TYPE="a"),
along with ordinary numbers in a multi-level list. In Figure 7.6, you can see the
resulting nicely formatted outline.
Though Figure 7.5 uses only the TYPE
attribute with the <OL> tag, you can also use it for specific <LI>
tags within a list (though it's hard to imagine a situation where you would want to). You
can also explicitly specify ordinary numbering with TYPE="1", and you
can make lowercase roman numerals with TYPE="i".
Here's one more seldom-used but
handy-when-you-need-it trick: You can start an ordered list with any number (or letter)
with the START attribute. <OL START="3">, for example,
starts a numbered list at 3 instead of 1. Individual points can be renumbered with the VALUE
attribute (<LI VALUE="12">, for example).
Just A Minute: Note that you must always use
numbers with the START and VALUE attributes. To make a list that starts
with the letter C, for example, you need to type <OL TYPE="A"
Figure 7.5. The TYPE attribute lets you
make multi-tiered lists with both numbered and lettered points.
Figure 7.6. A well-formatted outline can make almost
any plan look plausible.
To Do: Take a list or two of your own, and try to
find the best way to present the information so that it can be easily understood.
- Which type of list or combination of list types best
suits your list? Use ordered lists only for lists that have a natural order to them. Try
to avoid more than seven bullet points in a row in any unordered list, or the list will be
hard to read. Use definition lists whenever indenting is sufficient to convey the
structure of your information.
- Start each list (or new level within a multi-tiered
list) with an <OL>, <UL>, or <DL>. Start each
point within the list with <LI>. Use the TYPE attribute if you
want non-standard bullets or letters instead of numbers.
- If you want a blank line between list items, put a <P>
tag next to each <LI> tag.
- Be very careful to close every <OL>
list with </OL>, and to make sure that each <UL> or <DL>
has a corresponding </UL> or </DL>. Unclosed lists can make
pages look very strange, and can even cause some Web browsers not to display the list at
In this chapter, you learned to create and combine
three basic types of HTML lists: ordered lists, unordered lists, and definition lists.
Lists can be placed within other lists to create outlines and other complex arrangements
Table 7.1 lists all the tags and attributes covered
in this chapter.
Table 7.1. HTML tags and attributes
covered in Chapter 7.
||An ordered (numbered) list.
||The type of numerals used to label the
list. Possible values are A, a, I, i, 1.
||The value with which to start this
||An unordered (bulleted) list.
||The bullet dingbat used to mark list
items. Possible values are DISC, CIRCLE, and SQUARE.
||A list item for use with <OL>
||The type of bullet or number used to
label this item. Possible values are DISC, CIRCLE, SQUARE, A,
a, I, i, 1.
||The numeric value this list item
should have (affects this item and all below it in <OL> lists).
||A definition list.
||A definition term, as part of a
||The corresponding definition to a
definition term, as part of a definition list.
- Q I used <UL TYPE="square">, but
the bullets still came out round, not square.
A Are you using Netscape Navigator version 2.0 or higher? Alternate bullet types don't
show up in any other Web browser yet, but they probably will in future versions.
Q I've seen pages on the Internet that use three-dimensional looking little balls or
other special graphics for bullets. How do they do that?
A That trick is a little bit beyond what this chapter covers. You'll find out how to
do it yourself in Chapter 9, "Putting Images on a Web Page."
- 1. Write the HTML to create the following
2. How would you indent a single word and put a square bullet in front of it?
3. Use a definition list to show that the word "glunch" means "a look
of disdain, anger, or displeasure" and the word "glumpy" means
"sullen, morose, or sulky."
4. Write the HTML to create the following indentation effect:
All begin with an A.
1. <OL TYPE="A"
The following alternative will also do the same thing:
(Putting the TYPE="square" in the <LI> tag would give the same result,
because there's only one item in this list.)
<DT>glunch<DD>a look of disdain, anger, or displeasure
<DT>glumpy<DD>sullen, morose, or sulky
4. <DL><DT>Apple pie,<DD>pudding,<DL><DD>and
pancake,</DL> All begin with an A.</DL>
Note that blank lines will appear above and below and pancake, in Microsoft
Internet Explorer, but not in Netscape Navigator.
- Try producing an ordered list outlining the
information you'd like to put on your Web pages. This will give you practice formatting
HTML lists, and also give you a head start on thinking about the issues covered in Part
VI, "Building a Web Site."