Formatted Lists (HTML & XHTML: The Definitive Guide, 4th Edition)

Making information more accessible is the single most important quality of HTML and its progeny XHTML. The languages' excellent collection of text style and formatting tools help you organize your information into documents readers quickly understand, scan, and extract, possibly with automated browser agents.

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. Section 7.3, "The <li> Tag"

<ul>

Function:

Define an unordered list

Attributes:

CLASS
ONKEYUP

COMPACT
ONMOUSEDOWN

DIR
ONMOUSEMOVE

ID
ONMOUSEOUT

LANG
ONMOUSEOVER

ONCLICK
ONMOUSEUP

ONDBLCLICK
STYLE

ONKEYDOWN
TITLE

ONKEYPRESS
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, "Cascading Style Sheets").

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. And it 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 Cascading Style Sheet-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 use the default 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, "Cascading Style Sheets". Section 8.1.1, "Inline Styles: The style Attribute" Section 8.3, "Style Classes"

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 as to which direction the text ought to be displayed. 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 lang attribute"

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