HTML The Definitive Guide (81 page)

Nesting Lists

Directory Lists

Menu Lists

Definition Lists

Appropriate List Usage

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.

8.1.1 The

Tag


The

tag signals the browser that the following content, ending with the
tag, is an unordered list of items. Inside, each item in the unordered list is identified by a leading
• tag.
  

  Otherwise, nearly anything HTML-wise goes, including other lists, text, and multimedia elements.
  

  [

• , 8.3]
  
  
  

  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:
  

  ; 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 8-1), is not dictated by the HTML standard, so you shouldn't get bent out of shape trying to attain exact positioning of the elements.
  

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

  Popular Kumquat recipes:
  

  
  
  • Pickled Kumquats
    

  • 'Quats and 'Kraut (a holiday favorite!)
  • 'Quatshakes
    

  
  

  There are so many more to please every palate!
  

  Figure 8.1: A simple unordered list
  

  

  Tricky HTML authors sometimes use nested unordered lists, with and without

• -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 (

  ) or division (

  ) tag to indent nonlist sections of your document (see
  Chapter 9, Cascading Style Sheets
  ).
  

  8.1.1.1 The type attribute
  

  The graphical browsers automatically bullet each

• -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, 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.