[Chapter 8] Formatted Lists

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.

8.1 Unordered Lists

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 common topic, like "Related Kumquat Lovers' Sites," allies the items in an unordered list, but they have no order among themselves.

The `<ul>` Tag

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. [the section called "The <li> Tag"]

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 Figure 8.1.

Figure 8.1: A simple unordered list

[Graphic: Figure 8-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. Rather, it's best to use the border property with a style definition in the paragraph (<p>) or division (<div>) tag to indent nonlist sections of your document (see Chapter 9, Cascading Style Sheets).

The type attribute

The graphical browsers automatically bullet each <li>-tagged item in an unordered list. Netscape and Internet Explorer use a solid circle, for example; Mosaic precedes unordered list items with a hollow square (on the Mac) or a round ball (PC and UNIX). Browsers that support HTML 3.2 let you use the type attribute to specify which bullet symbol you'd rather have precede items in an unordered list. This attribute 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 later in this chapter.

Compact unordered lists

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 style and class attributes

The style attribute for the <ul> tag creates an inline style for the elements enclosed by the tag, overriding any other style rule in effect. The class attribute lets you format the content according to a predefined class of the <ul> tag; its value is the name of that class. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"].

8. Formatted Lists