You can organize information for presentation in many different ways. One of the most effective formats is the list. Lists are both functional and easy to read; they can define sequential procedures, relative importance, available decision options, collections of related data, and data ordering. We see lists everywhere and every day. From restaurant menus to encyclopedias to phone books, lists are a fundamental way that we organize and disseminate information.
HTML provides container elements for creating lists in HTML documents. The basic list types available are numbered, bulleted, menu, directory, and definition. You can mix these types to create a variety of display and organization effects.
In this chapter, you learn about the following:
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>, and the lists 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 using standard numbers, such as 1, 2, 3, and so on.
Ordered (or numbered) lists begin with the <OL> tag, and
each item uses the standard <LI> tag. Close the list with
the </OL> tag to signal the end of the list to the browser.
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. |
Figure 9.1 shows how you can use the OL list container. Pay particular attention to including 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.2 shows how Netscape Navigator interprets this HTML code.
Figure 9.1 : Lists can include fixed data as well as links to other information sources.
Figure 9.2 : Web browsers display internal HTML elements according to their defined usage.
| TIP |
The line break tag, <BR>, after the list header is not necessary for Netscape Navigator, but it is necessary for Microsoft Internet Explorer, which will otherwise put the first list item on the same line as the header. |
It is also possible to nest ordered lists, creating a document that looks more like an outline. Figure 9.3 shows the HTML code for such a list, which is rendered in figure 9.4
Figure 9.3 : Nested lists can be created by putting lists within other lists in HTML code.
Figure 9.4 : 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. |
Users may wonder how they can create a more classical style of outline in which subheadings use different list numbers (such as Roman numerals or letters) from the primary headings. Unfortunately, standard HTML lists do not enable the author to control how a browser numbers the list items-only that the items are numbered. The draft HTML 3.0 specification does include a provision for list numbering formats to be determined by style sheets. In addition, some Web browsers, such as Netscape Navigator and Microsoft Internet Explorer, enable the end user to modify how ordered lists are displayed, as described in the next section.
Netscape provides useful extensions to the <OL> tag supported
by its own Netscape Navigator as well as Microsoft Internet Explorer.
These give you control over the appearance of the item markers
and the beginning marker number. Table 9.1 lists the nonstandard
attributes and their functions.
| Extension | Description |
| 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 | 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. Figure 9.5 shows how an HTML document incorporates these extensions, and figure 9.6 shows how Netscape's extensions can enhance a document.
| 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 draft HTML 3.0 specification included an attribute to the <OL> tag called SEQNUM. Ideally then, you could pick up, say, at item seven by specifying <OL SEQNUM=7>. Unfortunately, this attribute is not yet supported by any of the popular Web browsers. What you can do is encourage your audience to switch to Netscape Navigator or Microsoft Internet Explorer as their Web browser, and you use the START extension to <OL>. This enables you to close the list, insert your text paragraph, and start a new list with whatever list number you choose, such as the following: <OL START=7> The number 7 is just an example. Put whatever value you want the numbering to start with. |
| TIP |
This trick also works if you're being creative in Netscape and using a different list marker with the TYPE extension. |
HTML also supports the unordered or bulleted list: a list of items that does not define a specific structure or relationship among the data.
Unordered 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 to the browser. Web browsers support and automatically indent sublists, and some will 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.
Figure 9.7 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 will ignore them. Figure 9.8 shows how Netscape Navigator will render this HTML code.
Figure 9.7 : Unordered lists can be used to list items where the sequence is not important.
Figure 9.8 : Web browsers automatically indent sublists and apply the corresponding item markers.
| NOTE |
When adding blank lines within an HTML document, use the preformatted text element <PRE> to create filler for blank lines, as follows: <PRE> </PRE> Remember to put two spaces inside the tags; most browsers will ignore <PRE> sections with only one. |
Netscape Navigator enables you to 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. Unlike with ordered lists, however, Microsoft Internet Explorer does not support this extension
The tag extension is TYPE. Figure 9.9 demonstrates its use in an HTML document, which is rendered by Netscape Navigator in figure 9.10. Note that while the tag values shown in this case are "SQUARE" and "CIRCLE," that Netscape Navigator renders them as filled-in and empty squares, respectively.
| CAUTION |
There is a reason why 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 the extensions to the <OL> and <UL> elements, Netscape also provides nonstandard 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 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 new item marker. |
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. Figure 9.11 shows typical uses of the <MENU> container.
Figure 9.11: As a container, the <MENU> element requires a closing </MENU> tag.
| 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. |
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, while Microsoft Internet Explorer displays them identically except it omits the bullets in the latter. NCSA Mosaic, as shown in figure 9.12, displays menu lists slightly different than unordered lists, using a more compact format. (Note that all types of lists can include hypertext links, as well as many other HTML elements besides simple text.)
Figure 9.12: Unlike the tag, the <MENU> element doesn't support nonstandard extensions.
| NOTE |
Menu items 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. |
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 functionality right now. Similar to <MENU>, <DIR> containers display with the same default settings as unordered lists. As browsers and other applications begin to support <DIR> as it's intended, it'll become more common.
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, although browsers interpret them correctly. When using <DIR>, remember to close the container with the ending </DIR> tag. Figure 9.13 shows typical uses of the <DIR> container.
Figure 9.13: The <DIR> element container has few frills and little browser support.
Browsers don't provide, by default, any unique display attributes for the <DIR> element. As with menu lists, Netscape Navigator and Microsoft Internet Explorer render directory lists just like unordered lists (Microsoft Internet Explorer without the bullets). My version of NCSA Mosaic also renders them as unordered lists, though in a different font and style (see fig. 9.14).
Figure 9.14: Currently, <DIR> text displays in a single vertical column like an unordered list.
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 the 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 will wrap 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 draft HTML 3.0 specification provides one 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 font and 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 in 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 to look at, and heading tags are usually meant to define relationships in paragraphs-not within lists. Figure 9.15 shows examples of how you can create definition lists.
Figure 9.16 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. |
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 of the list types. Figure 9.17 shows a sample of combined lists.
In the example in figure 9.17, I used three list types: 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. I'm relying on the users' browsers to indent embedded lists; if I want to force more indentation, I can embed the lists inside additional, empty lists. For instance, instead of the following:
<OL>
<LI>Small example list
<LI>That I want to indent more
</OL>
I 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 screen formatting of the elements and not the actual text representation itself, combined lists tend to display very well. Figure 9.18 shows how the samples in figure 9.17 display in a typical Web browser.
Beyond the types of lists and formats discussed above, there's not too much that can be done within those elements of the HTML 2.0 and draft HTML 3.0 specifications that are supported by the popular Web browsers now available. One thing in particular is the capability to specify alternative types of bullets to be used in an unordered list. This is satisfied by the HTML 3.0 SRC attribute to the <UL> tag. For instance, to use a cube image as a bullet in an unordered list, specify the following:
<UL SRC="cube.gif">
Unfortunately, this attribute is not yet supported in any of the popular Web browsers. It is, however, possible to achieve a similar effect with a little manual effort in your HTML code. Consider the HTML code shown in figure 9.19.
Figure 9.19: It is possible to get alternative list formats using a little manual effort in HTML.
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 the following example:
<IMG SRC="cube.gif" ALIGN=TOP> Red<BR>
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. This HTML code is rendered as shown in figure 9.20.