Chapter 7. Formatted Lists
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.
Beyond embellishing your text with specialized text tags, HTML and XHTML also provide a rich set of tools that help you organize content into formatted lists. There's nothing magical or mysterious about lists. In fact, the beauty of 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 web documents.
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"
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").
188.8.131.52. 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.
184.108.40.206. 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.
220.127.116.11. 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"
18.104.22.168. 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 22.214.171.124, "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 126.96.36.199, "The dir attribute"
188.8.131.52. 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 184.108.40.206, "The id attribute"
Use the optional title attribute and quote-enclosed string value also to identify the list. Unlike an id attribute, a title does not have to be unique. Section 220.127.116.11, "The title attribute"
id and title attributes
18.104.22.168. The event attributes
Copyright © 2002 O'Reilly & Associates. All rights reserved.