by Eric Ladd
Lists are a great approach to conveying a lot of information in a clear and logical way. Lists have always been, and will be, a part of HTML because of their readability on the end-user side and ease of use on the document-author side.
HTML 3.2 supports the following five types of lists:
Each type is discussed in this chapter.
Items in an unordered list do not have an ordinal relationship, so they can be presented in any order. Unordered lists are also called bulleted lists because browsers render list items with some type of bullet character in front of them.
All markup to produce an unordered list is found between the <UL> and </UL> tags. The list items are contained by <LI> and </LI> tags. For example, the HTML
<H1>Important Web Topics</H1> <UL> <LI>HTML = HyperText Markup Language</LI> <LI>Java = platform-independent Web programming language</LI> <LI>CGI = Common Gateway Interface</LI> </UL>
produces the list you see in Figure 6.1. Notice how the list items are indented from the left margin, making it easier to distinguish them from regular body text.
Many sites use unordered lists on their main pages to present a list of hypertext links to other pages on the site (see Figure 6.2). Having such a text-based list of links is an important courtesy to those users who have image loading turned off or who do not have a graphical browser.
Figure 6.2 : Unordered lists are a common way of presenting a set of hypertext links.
| NOTE |
Prior to HTML 3.2, some HTML authors used the <UL> tag for the indenting effect. If text following a <UL> is not preceded by an <LI> tag, the browser won't print a bullet character and the text simply looks indented. Technically, you can still do this today, but there is a better way to indent. HTML style sheets give authors control over indenting, so using <UL> to produce indented text should become a thing of the past. |
The <UL> tag takes the COMPACT attribute which instructs a browser to minimize the spacing between list items. Both <UL> and <LI> take the TYPE attribute. TYPE changes the bullet character that the browser places in front of each list item and sets to DISC for a solid disc, CIRCLE for an open circle, and SQUARE for a square.
Unfortunately, browsers' compliance with how the TYPE attribute is supposed to work is inconsistent, at best. Consider the HTML below. It produces the same three-item list but each with a different bullet character.
<UL TYPE="DISC"> <LI>One</LI> <LI>Two</LI> <LI>Three</LI> </UL> <HR> <UL TYPE="CIRCLE"> <LI>One</LI> <LI>Two</LI> <LI>Three</LI> </UL> <HR> <UL TYPE="SQUARE"> <LI>One</LI> <LI>Two</LI> <LI>Three</LI> </UL>
Figures 6.3 and 6.4 show how this HTML is rendered by Netscape Navigator and Microsoft Internet Explorer 3, respectively. Netscape Navigator does well on all three types. Internet Explorer seems to ignore the TYPE attribute and renders each list with solid discs as bullets.
Figure 6.3 : Netscape Navigator recognizes all of the values of the TYPE attribute of the <UL> tag.
Both of these figures show browsers running in a Windows 95 environment. Macintosh users will probably find differences on their platforms, too.
Placing the TYPE attribute in a <UL> tag changes the bullet type for the entire list. You can control the bullet character at the list item level by placing a TYPE attribute in an <LI> tag. The change in bullet character applies for all subsequent list items as well. For example, Netscape Navigator renders the HTML
<UL TYPE="DISC"> <LI>DISC</LI> <LI TYPE="SQUARE">SQUARE</LI> <LI>DISC</LI> </UL>
as shown in Figure 6.5.
| NOTE |
Some people choose to use custom bullet characters in their unordered lists; but, in order to do this properly, you need to use HTML tables. See Chapter 12, "Tables," for more details on how to use custom bullets. |
As the name implies, items in an ordered list are ordered. Ordered list items are numbered, starting with the number 1. For this reason, ordered lists are also sometimes called numbered lists.
Apart from how they render on screen, ordered lists work almost the same way that unordered lists do from a coding standpoint. All list items are contained between <OL> and </OL> tags and each list item is contained between <LI> and </LI> tags. For example,
<H1>Medals for the U.S. at the 1996 Summer Olympics</H1> <OL> <LI>Gold: 44</LI> <LI>Silver: 32</LI> <LI>Bronze: 25</LI> </OL>
is rendered by Internet Explorer as shown in Figure 6.6. Notice that the browser numbers list items in an ordered list automatically. This is especially convenient when you need to add, delete, or rearrange list items-the renumbering is done for you. List items also indent from the left margin. To reduce the spacing between items, include the COMPACT attribute in the <OL> tag.
Many popular sites make use of ordered lists. Figure 6.7 shows a list of Que's ten best-selling titles.
Figure 6.7 : Ordered list items can be hypertext links that take you to more detailed information.
Both the <OL> and <LI> tags take
the TYPE attribute, giving you control over what numbering
scheme to use in your ordered list. TYPE can be set to
the values you see in Table 6.1. TYPE="1" is
the default setting.
| Numbering scheme | |
| Counting numbers (1, 2, 3, ...) | |
| Uppercase letters (A, B, C, ...) | |
| Lowercase letters (a, b, c, ...) | |
| Uppercase Roman numerals (I, II, III, ...) | |
| Lowercase Roman numerals (i, ii, iii, ...) |
You can specify a TYPE for the entire list by placing it in the <OL> tag or for a given list item by placing it in the item's <LI> tag.
The ability to change the ordering scheme is useful, especially once you start to nest lists (embed one list inside another). The combination of nesting and different ordering schemes allows you to produce well-organized layouts like the traditional outline format.
In addition to being able to change the numbering scheme, you can also change the value at which the numbering starts by using the START attribute of the <OL> tag. This is useful in situations where an ordered list is "interrupted" by another element on a page. When you resume the ordered list (by starting with a new <OL> tag), you can set START equal to the appropriate starting value so that it looks like the list is picking up where it left off (see Figure. 6.8).
START is always set equal to a number, regardless of the chosen numbering scheme. The browser maps your START value against the numbering scheme it's using and chooses the correct value. Figure 6.9 shows how the following HTML is rendered:
Other employer-paid benefits include: <OL TYPE="A" START=3> <LI>Long-term disability</LI> <LI>Health club membership</LI> <LI>Tuition reimbursement</LI> </OL>
Changing the value of the numbering sequence in the middle of an ordered list is possible by using the VALUE attribute in an <LI> tag. An example of one useful application of VALUE would be a list of numbers going in descending order. To accomplish this, you'd need a VALUE attribute in each <LI> like the following:
<OL> <LI VALUE=3>French hens</LI> <LI VALUE=2>Turtle doves</LI> <LI VALUE=1>Partridge in a pear tree</LI> </OL>
Many documents that are full of technical terms require a glossary so that a user can look up a term if it is not understood. Definition lists make it easy to replicate the term/definition structure found in a glossary.
All terms and definitions in a definition list are found between the <DL> and </DL> tags. Inside of these tags, you mark up a term with <DT> and </DT> tags and a definition with <DD> and </DD> tags. Definitions are indented from the terms above them as Figure 6.10 shows. The HTML to produce it follows:
<DL> <DT>Isosceles triangle</DT> <DD>A triangle having two equal sides</DD> <DT>Equilateral triangle</DT> <DD>A triangle having three equal sides</DD> <DT>Right triangle</DT> <DD>A triangle having one right angle</DD> </DL>
Apart from the indenting of definitions, neither terms nor definitions
format in any special way. Use the COMPACT attribute
in the <DL> tag to decrease the spacing between
adjacent terms and definitions.
| TIP |
Formatting terms with the <B> container tag renders them in boldface and makes them easier to distinguish from the definitions. |
Definition lists were created to support glossary listings, but you're not limited to using them for just glossaries. Any listing of item names followed by extensive descriptions-catalog listings or job descriptions, for example-can be marked up as a definition list.
Menu lists were originally created for producing menus of short (less than one line) options. Presumably, the menu items would be hypertext links that would take the user to another part of a site.
The options in a menu list are found between the <MENU> and </MENU> container tags. Each list item is again contained between <LI> and </LI> tags. The <MENU> tag takes the COMPACT attribute to reduce inter-item spacing.
Menus look like unordered lists on a browser screen. The different options in a menu list appear with bullets in front of them. The distinction between an unordered list and a menu list is more for the browser than for the end user. In the future, browsers may be programmed to render menu lists in a special format. Additionally, by using style sheets, end users should be able to create their own configurations for the <MENU> tag. For now, though, menu lists look like what you see in Figure 6.11. The corresponding HTML is
<MENU> <LI>What's New!</LI> <LI>Press Releases</LI> <LI>Job Opportunities</LI> <LI>Contact Information</LI> </MENU>
Directory lists are another type of specialty list without special browser support. Directory lists are intended for lists of short (less than 24 characters) items that are to be displayed in rows. This is like directory listings in UNIX or in DOS with the /W show (a multiple-column view of the file names). Like menu lists, however, most browsers simply render a directory list as an unordered list.
The <DIR> container tag creates a directory list. List items are contained by <LI> and </LI> tags. The COMPACT attribute in the <DIR> tag packs the list into a smaller space by reducing the spacing between items. A sample directory list follows:
<H1>Employee Directory</H1> <DIR> <LI>Lona Dallessandro, x297</LI> <LI>Bob Leidich, x324</LI> <LI>Carolyn McHale, x313</LI> </DIR>
Internet Explorer's rendering of the preceding directory list is shown in Figure 6.12.
You can achieve nice on-screen results when you start embedding or nesting lists inside of other lists. HTML supports just about any nested list combination imaginable. The next three sections consider some of the possibilities.
Figure 6.13 shows one unordered list embedded in another. This is accomplished by simply starting a second unordered list inside the initial one:
<UL> <LI>HTML</LI> <!-- Begin embedded list --> <UL> <LI>Based on SGML</LI> <LI>Used to author Web pages</LI> <LI>Maintained by the W3C</LI> </UL> <!-- End embedded list --> <LI>Java</LI> <LI>CGI</LI> </UL>
Notice in the figure how Netscape Navigator automatically changes the bullet character in the nested list. In Windows 95, Netscape Navigator changes the bullet from a solid disc to an open circle to a square, unless you specify another bullet character using the TYPE attribute. Microsoft Internet Explorer continues to use solid discs for bullets in all nested lists.
Nesting ordered lists is a great way to reproduce a document in outline format. This requires judicious use of the TYPE attribute in each <OL> tag, but the on-screen results are worth the effort (see Figure 6.14). The corresponding HTML is:
<OL TYPE="I"> <LI>Abstract</LI> <LI>Introduction</LI> <OL TYPE="A"> <LI>Overview of Current Research</LI> <LI>Problem Definition</LI> <LI>Research Team</LI> <OL TYPE="1"> <LI>Faculty</LI> <LI>Graduate Students</LI> </OL> <LI>Research Subjects</LI> </OL> <LI>Methodology</LI> </OL>
If you want to number the terms in a definition list, embed several definition lists in a single ordered list. For example, the HTML
<OL>
<LI>
<DL>
<DT>Isosceles triangle</DT>
<DD>A triangle having two equal sides</DD>
</DL>
</LI>
<LI>
<DL>
<DT>Equilateral triangle</DT>
<DD>A triangle having three equal sides</DD>
</DL>
</LI>
<LI>
<DL>
<DT>Right triangle</DT>
<DD>A triangle having one right angle</DD>
</DL>
</LI>
produces the screen you see in Figure 6.15. Notice how numbering the terms makes them stand out better.
Most browsers do a decent job formatting lists on screen-especially unordered, ordered, and definition lists. There are some steps you can take to enhance a list's appearance on screen if you're not satisfied with the default formatting.
Every list opening tag (<UL>, <OL>, <DL>, <MENU>, and <DIR>) takes the COMPACT attribute to minimize space between items. Sometimes, you may want to increase the space between items to give them a little more breathing room (see Figure 6.16). You can accomplish this by placing a <P> tag at the end of each list item. The <P> introduces a paragraph break which inserts a blank line after the list item.
In unordered, ordered, menu, and directory lists, you can put
the <P> tag after each </LI> tag
to increase inter-item spacing. For definition lists, put the
<P> after each </DD> tag.
| NOTE |
Once style sheets are fully implemented, you'll be able to associate increased line spacing with the <LI> tag. This will make using the <P> tag for increased spacing unnecessary. |
List items, terms, and definitions can all be formatted with an HTML text-level element. These include the physical styles, the logical styles, and the <FONT> tag. Technically, heading styles are not permitted in list items, but some browsers support them.