7.1 Unordered Lists

7.1 Unordered Lists

Like a laundry or shopping list, an unordered list 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.

7.1.1 The <ul> Tag

The <ul> tag signals to 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/XHTML-wise goes, including other lists, text, and multimedia elements. [<li>]

<ul> Function Defines an unordered list Attributes class, compact, dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title, type End tag </ul>; never omitted Contains list_content Used in block

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, although similar for the popular browsers (see Figure 7-1), is not dictated by the standards, so you shouldn't get bent out of shape trying to attain exact positioning of the elements.

Here is an example XHTML unordered list, which Internet Explorer renders with bullets, as shown in Figure 7-1:

Popular Kumquat recipes:

<ul>

  <li>Pickled Kumquats</li>

  <li>'Quats and 'Kraut (a holiday favorite!)</li>

  <li>'Quatshakes</li>

</ul>

There are so many more to please every palate!

Figure 7-1. A simple unordered list

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 8).

7.1.1.1 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. Browsers that support HTML 3.2 and later versions, including 4.0 and 4.01, as well as XHTML 1.0, 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.

With the advent of standard Cascading Style Sheets, the W3C has deprecated the type attribute in HTML 4 and in XHTML. Expect it to disappear.

7.1.1.2 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; it also may reduce the indentation between list items, if it does anything at all with indentation (usually it doesn't).

Some browsers ignore the compact attribute, so you shouldn't depend on its formatting attributes. Also, the attribute is deprecated in the HTML 4 and XHTML standards, so it hasn't long to live.

7.1.1.3 The class and style attributes

The style and class attributes bring CSS-based display control to lists, providing far more comprehensive control than you would get through individual attributes like type. Combine the style attribute with the <ul> tag, for instance, to assign your own bullet icon image, rather than using the common circle, disc, or square. The class attribute lets you apply the style of a predefined class of the <ul> tag to the contents of the unordered list. The value of the class attribute is the name of a style defined in some document-level or externally defined style sheet. For more information, see Chapter 8. [Section 8.1.1] [Section 8.3]

7.1.1.4 The lang and dir attributes

The lang attribute lets you specify the language used within a list, and dir lets you advise the browser which direction the text should be displayed in. The value of the lang attribute is any of the ISO standard two-character language abbreviations, including an optional language modifier. For example, adding lang=en-UK tells the browser that the list is in English ("en") as spoken and written in the United Kingdom ("UK"). Presumably, the browser may make layout or typographic decisions based upon your language choice. [Section 3.6.1.2]

The dir attribute tells the browser which direction to display the list contents in — from left to right (dir=ltr), like English or French, or from right to left (dir=rtl), as with Hebrew or Chinese. [Section 3.6.1.1]

7.1.1.5 The id and title attributes

Use the id attribute to specially label the unordered list. An acceptable value is any quote-enclosed string that uniquely identifies the list and can later be used to unambiguously reference the list in a hyperlink target, for automated searches, as a style-sheet selector, and for a host of other applications. [Section 4.1.1.4]

You also can use the optional title attribute and quote-enclosed string value to identify the list. Unlike an id attribute, a title does not have to be unique. [Section 4.1.1.4]

7.1.1.6 The event attributes

The many user-related events that may happen in and around a list, such as when a user clicks or double-clicks within its display space, are recognized by current browsers. With the respective "on" attribute and value, you may react to those events by displaying a user dialog box or activating some multimedia event. [Section 12.3.3]