• Hour 7
  • The Three Types of HTML Lists
    • Figure 7.1.
    • Figure 7.2.
  • Lists Within Lists
    • Figure 7.3.
    • Figure 7.4.
    • Figure 7.5.
    • Figure 7.6.
  • Summary
  • Q&A
  • Quiz
    • Questions
    • Answers
  • Activities

Hour 7

Arranging 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.

The Three 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 of numbers.

• 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 way.

---

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.

Lists Within Lists

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

</DL></DL></DL></DL>

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 of <UL>.

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 "Special."

<UL TYPE="circle">

<LI>Extra

<LI>Super

<LI TYPE="square">Special

</UL>

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" START="3">.

---

Figure 7.5. The TYPE attribute lets you make multi-tiered lists with both numbered and lettered points.

---

Coffee Break: By combining ordered, unordered, and definition lists within one another, you can organize the most complex information in a readable and attrac-tive way. To get your creative juices flowing, I've created a "list of lists" for you to browse through before you begin organizing your own HTML lists.

---

To check it out, go to the 24-Hour HTML Café List-O-Mania page at

http://www.mcp.com/sams/books/235-8/listlist.htm

Have some fun while you're there by trying to figure out what the real titles of the sample lists might be, based on the information they contain. Answers are given--as a nested HTML list, of course--at the end of the page.

You can also see how a list was used to enhance the 24-Hour HTML Café welcome page during the early stages of its development, at

http://www.mcp.com/sams/books/235-8/cafe7.htm

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 all.

Summary

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 of text.

Table 7.1 lists all the tags and attributes covered in this chapter.

Table 7.1. HTML tags and attributes covered in Chapter 7.

Tag	Attribute	Function
<OL>...</OL>		An ordered (numbered) list.
	TYPE="..."	The type of numerals used to label the list. Possible values are A, a, I, i, 1.
	START="..."	The value with which to start this list.
<UL>...</UL>		An unordered (bulleted) list.
	TYPE="..."	The bullet dingbat used to mark list items. Possible values are DISC, CIRCLE, and SQUARE.
<LI>		A list item for use with <OL> or <UL>.
	TYPE="..."	The type of bullet or number used to label this item. Possible values are DISC, CIRCLE, SQUARE, A, a, I, i, 1.
	VALUE="..."	The numeric value this list item should have (affects this item and all below it in <OL> lists).
<DL>...</DL>		A definition list.
<DT>		A definition term, as part of a definition list.
<DD>		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 ordered list:

X. Xylophone

Y. Yak

Z. Zebra

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:

Apple pie,

pudding,

and pancake,

All begin with an A.

1. <OL TYPE="A" START="24"><LI>Xylophone<LI>Yak<LI>Zebra</OL>

The following alternative will also do the same thing:
<OL TYPE="A"><LI VALUE="24">Xylophone<LI>Yak<LI>Zebra</OL>

2. <UL TYPE="square"><LI>Supercalifragilisticexpealidocious</UL>

(Putting the TYPE="square" in the <LI> tag would give the same result, because there's only one item in this list.)

3. <DL>
<DT>glunch<DD>a look of disdain, anger, or displeasure
<DT>glumpy<DD>sullen, morose, or sulky
</DL>

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."