 |
Chapter 7 |  |
|
Chapter 7 | |
Contents:
Unordered Lists
Ordered Lists
The <li> Tag
Nesting Lists
Directory Lists
Menu Lists
Definition Lists
Appropriate List Usage
Making information more accessible is the single most important quality of HTML. The language's excellent collection of text style and formatting tools helps you organize your information into documents readers quickly understand, scan, and extract, possibly with automated browser agents.
Beyond embellishing your text with specialized text tags, HTML also provides a rich set of tools that help you organize content into formatted lists. There's nothing magical or mysterious about HTML lists. In fact, the beauty of HTML lists is their simplicity. They're based on common list paradigms we encounter every day, such as an unordered laundry list, ordered instruction lists, and dictionary-like definition lists. All are familiar, comfortable ways of organizing content. All provide powerful means for quickly understanding, scanning, and extracting pertinent information from your HTML documents.
Like a laundry or shopping list, an unordered list in HTML is a collection of related items that have no special order or sequence. The most common unordered list you'll find on the Web is a collection of hyperlinks to other documents. Some topic, however vague like ``Related Kumquat Lovers' Sites,'' allies the items in an unordered list, but they have no order among themselves.
The <ul> tag signals the browser that the following content, ending with the </ul> tag, is an unordered list of items. Inside, each item in the unordered list is identified by a leading <li> tag. Otherwise, nearly anything HTML-wise goes, including other lists, text, and multimedia elements. [<li>, 7.3]
Typically, the browser adds a leading bullet character and formats each item on a new line, indented somewhat from the left margin of the document. The actual rendering of unordered lists, however, varies widely between browsers, so you shouldn't get bent out of shape trying to attain exact positioning of the elements. For instance, some browsers treat the start of an unordered list as a new paragraph and like the <p> tag leave a blank line above the list. Other browsers simply start the list item after a simple line break. Browsers vary, too, in how much space they use between list items. For example, the following source:
Popular Kumquat recipes: <ul> <li>Pickled Kumquats <li>'Quats and 'Kraut (a holiday favorite!) <li>'Quatshakes </ul> There are so many more to please every palate!
appears to the Mosaic user as shown in the Figure 7-1.
Tricky HTML authors sometimes use nested unordered lists, with and without <li> tagged items, to take advantage of the automatic, successive indenting. You can produce some fairly slick text segments that way. Just don't depend on it for all browsers, including future ones.
The character used for the bullet at the beginning of each <li> tagged item in the list is not defined by the HTML standard, so browsers are free to use nearly any sort of bullet. Tradition does prevail. Most graphical browsers use either a round or square bullet; the Lynx character-based browser uses an asterisk to denote the start of each list element. You can also create custom bullets for your lists using definition lists, as we explain below.
If you like wide open spaces, you'll hate the optional compact attribute for the <ul> tag. It tells the browser to squeeze the unordered list into an even smaller, more compact text block. Typically, the browser reduces the line spacing between list items. And it may reduce the indentation between list items, if it does anything at all (usually it doesn't).
Some browsers ignore the compact attribute, so you should not overly depend on its formatting attributes.
The graphical browsers automatically bullet each item in an unordered list. Netscape uses a solid disc, for example; Mosaic precedes unordered list items with a hollow square (on the Mac) or a round ball (PC and UNIX). With Netscape you can use the type attribute to specify which bullet symbol you'd rather have precede items in an unordered list. The type attribute is Netscape-only; it is ignored by other browsers. It may have a value of either disc, circle, or square. All the items within that list will thereafter use the specified bullet symbol, unless an individual item overrides the list bullet type, as described below.
![[Graphic: Figure 7-1]](figs/uhtml0701.gif)
