by Mark R. Brown, Jerry Honeycutt, and Jim O'Donnell
A basic list in HTML consists of a list-identifier container plus the standard list items tag. (In HTML, all list items use one tag, <LI>, while the lists themselves are differentiated by their container tags.) An ordered list, also called a numbered list, is used to create a sequential list of items or steps. When a Web browser sees the tag for an ordered list, it sequentially numbers each list item by using standard numbers (1, 2, 3, and so on).
Ordered (or numbered) lists begin with the <OL> tag, and each item uses the standard <LI> tag. If needed, you can create a list heading by using the <LH> tag. Close the list with the </OL> tag to signal the end of the list. List containers provide both a beginning and ending line break to isolate the list from the surrounding text; it's not necessary (except for effect) to precede or follow the list with the paragraph <P> tag.
NOTE: Lists support internal HTML elements. One of the most useful elements is the paragraph tag (<P>), which enables you to separate text in a list item. Other useful tags include both logical and physical style tags (such as <EM> and <I>) and HTML entities. Headings are not appropriate for use in lists; although they're interpreted correctly, their forced line breaks make for an ugly display. SGML purists also object to them because heading tags are meant to define relationships in paragraphs, not lists.
Listing 9.1 shows how you can use the OL list container. Pay particular attention to closing tags, especially in nested lists. You can use leading blanks and extra lines to make your list code easier to read, but Web browsers ignore them. Figure 9.1 shows how Netscape Navigator interprets this HTML code.
<HTML>
<HEAD>
<TITLE>ordered List Example</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Colors of the Spectrum:</EM><BR>
<LI>Red
<LI>Orange
<LI>Yellow
<LI>Green
<LI>Blue
<LI>Indigo
<LI>Violet
</OL>
</BODY>
</HTML>
FIG. 9.1
Web browsers display internal HTML elements according to their defined usage.
It is also possible to nest ordered lists, creating a document that looks more like an outline. Listing 9.2 shows the HTML code for such a list, which is rendered in Figure 9.2.
<HTML>
<HEAD>
<TITLE>Nested Ordered List Example</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<OL>
<LI>57.9 million kilometers from the sun
<LI>no satellites
</OL>
<LI>Venus
<OL >
<LI>108 million kilometers from the sun
<LI>No satellites
</OL>
<LI>Earth
<OL>
<LI>149.6 million kilometers from the sun
<LI>one satellite: The Moon
</OL>
<LI>Mars
<OL>
<LI>227.9 million kilometers from the sun
<LI>two satellites
<OL>
<LI>Phobos
<LI>Deimos
</OL
</OL>
</OL>
</BODY>
</HTML>
FIG. 9.2
Sublists are automatically indented to create an outline effect.
TIP: Use indentations and blank lines to organize your data when creating HTML documents. Web browsers don't care how the text is aligned or run together, but you will appreciate the extra effort when rereading and editing the HTML code.
HTML 4.0 defines a handful of attributes for the <OL> tag, which began as a Netscape extension. Now that these attributes have gained acceptance, they're part of the HTML specification.
These attributes give you control over the appearance of the item markers and the beginning marker number. Table 9.1 lists these attributes and their functions.
| Attribute | Description |
| COMPACT | Renders the list in a more compact form |
| TYPE=A | Sets markers to uppercase letters |
| TYPE=a | Sets markers to lowercase letters |
| TYPE=I | Sets markers to uppercase Roman numerals |
| TYPE=i | Sets markers to lowercase Roman numerals |
| TYPE=1 | Sets markers to numbers |
| START=n | Sets beginning value of item markers in the current list |
Varying the marker style enables you to create distinctions between numbered lists in the same document. Listing 9.3 shows how an HTML document incorporates these attributes, and Figure 9.3 shows how these attributes can enhance a document.
<HTML>
<HEAD>
<TITLE>Nested Ordered List Example Using Type</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<OL TYPE=A>
<LI>57.9 million kilometers from the sun
<LI>no satellites
</OL>
<LI>Venus
<OL TYPE=A>
<LI>108 million kilometers from the sun
<LI>No satellites
</OL>
<LI>Earth
<OL TYPE=A>
<LI>149.6 million kilometers from the sun
<LI>one satellite: The Moon
</OL>
<LI>Mars
<OL TYPE=A>
<LI>227.9 million kilometers from the sun
<LI>two satellites
<OL>
<LI>Phobos
<LI>Deimos
</OL
</OL>
</OL>
</BODY>
</HTML>
FIG. 9.3
Controlling the appearance of lists is useful for both functional and aesthetic
purposes.
TROUBLESHOOTING: I'm creating a list of items and I need to interrupt the list for a regular paragraph of text. How can I make the list pick up where it left off and continue numbering the items sequentially? The HTML specification includes an attribute for the <OL> tag called START. Ideally then, you could pick up, say, at item 7 by specifying <OL START=7>. The number 7 is just an example. Put whatever value you want the numbering to start with.
HTML also supports the unordered or bulleted list, which is a list of items that does not define a specific structure or relationship among the data.
Unordered lists (bulleted lists) use the <UL> container tag. Just like ordered lists, bulleted lists provide beginning and ending line breaks and support internal HTML elements and sublists. Also, like ordered lists, they require closing tags; include the </UL> tag to signal the end of the list. Web browsers support and automatically indent sublists, and some also vary the bullet icon based on the relative level of the list. These icons vary depending on the client software viewing the HTML document.
Listing 9.4 shows how to use the <UL> list container. Again, to make the HTML document easier to read, you can include leading blanks and extra lines, but Web browsers ignore them. Figure 9.4 shows how Netscape Navigator renders this HTML code.
<HTML>
<HEAD>
<TITLE>Nested Unordered List Example</TITLE>
</HEAD>
<BODY>
<UL>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<UL >
<LI>108 million kilometers from the sun
<LI>no satellites
</UL>
<LI>Venus
<UL >
<LI>108 million kilometers from the sun
<LI>No satellites
</UL>
<LI>Earth
<UL>
<LI>149.6 million kilometers from the sun
<LI>one satellite: The Moon
</UL>
<LI>Mars
<UL>
<LI>227.9 million kilometers from the sun
<LI>two satellites
<UL>
<LI>Phobos
<LI>Deimos
</UL
</UL>
</UL>
</BODY>
</HTML>
FIG. 9.4
Web browsers automatically indent sublists and apply the corresponding markers.
Like the <OL> tag, the HTML specification adopted some of Netscape's extensions for the <UL> tag. You can manually control the appearance of item markers as either circles, squares, or discs. This feature is meant to give you more control over the look of bulleted lists.
You use the TYPE attribute to change the bullet used in the list. Its value can be one of disc, square, or circle. Listing 9.5 demonstrates its use in an HTML document, which is rendered by Netscape Navigator in Figure 9.5.
<HTML>
<HEAD>
<TITLE>Nested Unordered List Example Using Type</TITLE>
</HEAD>
<BODY>
<UL TYPE=SQUARE>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<UL TYPE=CIRCLE>
<LI>108 million kilometers from the sun
<LI>no satellites
</UL>
<LI>Venus
<UL TYPE=CIRCLE>
<LI>108 million kilometers from the sun
<LI>No satellites
</UL>
<LI>Earth
<UL TYPE=CIRCLE>
<LI>149.6 million kilometers from the sun
<LI>one satellite: The Moon
</UL>
<LI>Mars
<UL TYPE=CIRCLE>
<LI>227.9 million kilometers from the sun
<LI>two satellites
<UL TYPE=DISC>
<LI>Phobos
<LI>Deimos
</UL
</UL>
</UL>
</BODY>
</HTML>
FIG. 9.5
It's easy to control the display of bullet markers for your Netscape Navigator audience.
CAUTION: There is a reason HTML and its client software support multiple item markers: to provide a visual differentiation for sublists. By manually controlling the markers, however, you're working against the user's expectations and potentially weakening the communication of your document's information. After all, the less work the user has to do to recognize subsets of lists, the easier any browser can read the document. Use this manual control with care.
NOTE: Besides attributes for the <OL> and <UL> elements, HTML 4.0 also provides extensions for individual list items. The extensions are based on those available to the list container that the item is in (ordered or unordered). Ordered lists pass on the capability to change the current TYPE of list items and also the VALUE they begin with--by using the <VALUE> tag, you can either begin a list with a value other than one, or change the numbering within a list. This would be another good way to continue a list that has been interrupted by some other type of HTML object. (All subsequent items adopt the extension changes until the list closes.) You can modify unordered list items with the TYPE extension; all subsequent items in the container use the item marker.
Like the <OL> tag, <UL> also supports the COMPACT attribute, which causes the browser to render the list in a more compact form.
You can create menu lists with another list type supported by HTML and Web browsers. The distinction here is primarily for HTML identification; most browsers' default display for the <MENU> container is very similar to the font and style used for the unordered list container. The value of this element is enhanced if you select a distinct screen format for the menu paragraph in a Web browser's preferences. The container might also be more functional in future versions of HTML and its client software, enabling browsers and other applications to identify the menu sections in your documents.
As with the previous lists, menu lists provide beginning and ending line breaks and can include other HTML elements in a menu container. The anchor element is the most likely HTML element to use in this type of list; it is used to link the menu listings to other document resources or Internet applications. Listing 9.6 shows typical uses for the <MENU> container.
TIP: Just because HTML has specific names for these list types doesn't mean you're limited in how you can use them. Experiment to see how each list delivers your information and use what works best.
<HTML>
<HEAD>
<TITLE>Menu Listing Example</TITLE>
</HEAD>
<BODY>
<MENU>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI><A HREF="mercury.htm">Mercury</A>
<LI><A HREF="venus.htm"> Venus </A>
<LI><A HREF="earth.htm"> Earth </A>
<LI><A HREF="mars.htm"> Mars </A>
<LI><A HREF="jupiter.htm"> Jupiter </A>
<LI><A HREF="saturn.htm"> Saturn </A>
<LI><A HREF="uranus.htm"> Uranus </A>
<LI><A HREF="neptune.htm"> Neptune </A>
<LI><A HREF="pluto.htm"> Pluto </A>
</MENU>
</BODY>
</HTML>
Again, the current implementation of <MENU> by most Web browsers doesn't provide a visual distinction between menu and unordered lists. Netscape Navigator displays menu lists and unordered lists identically (see Figure 9.6), while Microsoft Internet Explorer displays them identically except for the omission of bullets in the latter.
NOTE: Menu items (and other list types) can contain hypertext links to other documents or Internet resources. Use the <A> container to create the links, as follows:
<A HREF="home.htm">Jump to My Home Page</A>
Click the text Jump to My Home Page, and the browser retrieves the document HOME.HTM.
FIG. 9.6
The <MENU> tag hasn't changed much since it was incorporated into
HTML 2.0.
The <DIR> element functions much like the <MENU> element; it provides HTML identification to the section of text that has more potential usefulness than real functional value. Similar to <MENU>, <DIR> containers display with the same default settings as unordered lists.
The intended use for the <DIR> container limits items to 24 characters and displays the items in rows (like file directories in UNIX, or in DOS using the /W parameter). Current browsers don't support this interpretation. The <DIR> element also isn't intended to include other HTML elements; browsers interpret them correctly. When using <DIR>, remember to close the container with the ending </DIR> tag. Listing 9.7 shows typical uses of the <DIR> container.
<HTML>
<HEAD>
<TITLE>Dir List Example</TITLE>
</HEAD>
<BODY>
<DIR>
<LH><EM>Colors of the Spectrum:</EM><BR>
<LI>Red
<LI>Orange
<LI>Yellow
<LI>Green
<LI>Blue
<LI>Indigo
<LI>Violet
</DIR>
</BODY>
</HTML>
Definition lists, also called glossary lists, are a special type of list in HTML. They provide a format like a dictionary entry, with an identifiable term and indented definition paragraph. This format is especially useful when listing items with extensive descriptions, such as catalog items or company departments. The <DL> element provides both a beginning and ending line break. In the <DL> container, the <DT> tag marks the term and the <DD> tag defines the paragraph. These are both open tags, meaning they don't require a closing tag to contain text.
The standard format of a definition list is as follows:
<DL> <DT>Term <DD>Definition of term </DL>
The <DT> tag's text should fit on a single line, but it wraps to the next line without indenting if it runs beyond the boundary of the browser window. The <DD> tag displays a single paragraph, continuously indented one or two spaces beneath the term element's text (depending on how the browser interprets a definition list).
The HTML 4.0 specification provides an important optional attribute for <DL>: COMPACT. This attribute is supposed to be interpreted as a list with a different style, presumably with a smaller font size or more compact character spacing. This could be useful for embedded definition lists (those inside other definition, numbered, or bulleted lists), or for graphic effect. Most browsers, however, ignore the attribute, displaying the definition list to the standard format.
Definition lists can include other HTML elements. The most common are physical and logical styles and other list containers. Although Web browsers can correctly interpret elements such as headings, this is bad HTML; their forced line breaks are not pretty and heading tags are usually meant to define relationships in paragraphs, not within lists. Listing 9.8 shows examples of how you can create definition lists.
Figure 9.7 shows how this document displays in Netscape Navigator. Other browsers may format this text differently.
TIP: In Netscape Navigator, use a horizontal rule, <HR>, on a <DD> tagged line in a definition list. The rule indents with the rest of the <DD> lines, providing an easy-to-read separator for your definition text.
<HTML>
<HEAD>
<TITLE>Definition List Example</TITLE>
</HEAD>
<BODY>
<DL>
<DT>Mercury
<DD>The smallest of the planets and the one nearest the sun,
having a sidereal period of revolution about the sun of 88.0
days at a mean distance of 58.3 million kilometers (36.2
million miles) and a mean radius of approximately 2,414
kilometers (1,500 miles).
<DT>Venus
<DD>The second planet from the sun, having an average radius
of 6,052 kilometers (3,760 miles), a mass 0.815 times that of
Earth, and a sidereal period of revolution about the sun of
224.7 days at a mean distance of approximately 100.1 million
kilometers (67.2 million miles).
<DT>Earth
<DD>The third planet from the sun, having a sidereal period
of revolution about the sun of 365.26 days at a mean distance
of approximately 149 million kilometers (92.96 million miles),
an axial rotation period of 23 hours 56.07 minutes, an average
radios of 6,374 kilometers (3,959 miles), and a mass of
approximately 29.11 x 10^24 kilograms (13.17 x 10^24 pounds).
</DL>
</BODY>
</HTML>
There are times when it's necessary to use sublists of more than one type within a single list. For instance, you may have a numbered list that includes a list as one of the numbered elements. Instead of just creating an ordered sublist, which numbers each of its items, you might prefer to display an unordered list to differentiate the sublist (while avoiding ordering the information as well). HTML supports embedded combinations of all list types. Listing 9.9 shows a sample of combined lists.
FIG. 9.7
Definition lists appear much the same as dictionary entries and enable easy reading
of each term.
<HTML>
<HEAD>
<TITLE>Combined List Example</TITLE>
</HEAD>
<BODY>
<OL>
<LH><EM>Planets of the Solar System:</EM><BR>
<LI>Mercury
<UL>
<UL>
<LI>Roman god of commerce, travel, and thievery
<LI>Dictionary Definition
<DL>
<DT>Mercury
<DD>The smallest of the planets and the one
nearest the sun, having a sidereal period of
revolution about the sun of 88.0 days at a
mean distance of 58.3 million kilometers (36.2
million miles) and a mean radius of approximately
2,414 kilometers (1,500 miles).
</DL>
</UL>
</UL>
<LI>Venus
<UL>
<UL>
<LI>Roman goddess of sexual love and physical beauty
<LI>Dictionary Definition
<DL>
<DT>Venus
<DD>The second planet from the sun, having an
average radius of 6,052 kilometers (3,760 miles),
a mass 0.815 times that of Earth, and a sidereal
period of revolution about the sun of 224.7 days
at a mean distance of approximately 100.1 million
kilometers (67.2 million miles).
</DL>
</UL>
</UL>
</OL>
</BODY>
</HTML>
Three list types are used in Listing 9.9: numbered, bulleted, and definition. The primary list is a numbered list of planets. Each planet has a bulleted sublist indicating the Roman god after whom it was named, followed by its dictionary definition. The users' browsers are being relied on to indent embedded lists; if more indentation were desired, the lists can be embedded inside additional, empty lists. For instance, instead of
<OL>
<LI>Small example list
<LI>That I want to indent more
</OL>
you can force more indentation by using
<OL><OL>
<LI>Small example list
<LI>That I want to indent more
</OL></OL>
Because the primary difference between list types involves either the list item markers or the format of the elements--and not the actual text representation itself--combined lists tend to display very well. Figure 9.8 shows how the samples in Listing 9.9 display in a typical Web browser.
It is possible to create custom bullets with a little manual effort in your HTML code. Consider the HTML code shown in Listing 9.10.
The <UL> and </UL> tags are used to instruct the Web browser to set up the formatting and indentation to support an unordered list. However, no <LI> tags are used: Because you don't want the standard bullets, you can't use the standard list-item tag. Instead, each item in the list is specified similar to this example:
<IMG SRC="cube.gif" ALIGN=TOP>Red<BR>
FIG. 9.8
Embedded list types inherit certain format-ting characteristics from the original
list styles.
The <IMG> tag is used to specify and align the graphic you want to use as your bullet, followed by the list item. Because you're not using the standard <LI> tag to set off each item, you need to use the <BR> tag to insert a line break after each one. This HTML code is rendered as shown in Figure 9.9.
<HTML>
<HEAD>
<TITLE>Manual List Example</TITLE>
</HEAD>
<BODY>
<IMG SRC="BulletSquiggle.gif" ALIGN=TOP><em>Colors of the Spectrum:</EM><BR>
<UL>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Red<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Orange<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Yellow<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Green<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Blue<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Indigo<BR>
<IMG SRC="BulletCheck.gif" ALIGN=TOP>Violet<BR>
</UL>
</BODY>
</HTML>
FIG. 9.9
With a little added work, nonstandard formatting and bullets can be used on your
Web pages.
© Copyright, Macmillan Computer Publishing. All rights reserved.