start page | rating of books | rating of authors | reviews | copyrights

Book HomeHTML & XHTML: The Definitive GuideSearch this book

Chapter 7. Formatted Lists

Contents:

Unordered Lists
Ordered Lists
The <li> Tag
Nesting Lists
Definition Lists
Appropriate List Usage
Directory Lists
Menu 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"

<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

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



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.