HTML: The Definitive Guide

Previous Chapter 8
Formatted Lists
Next
 

8.5 Directory Lists

The directory list is a specialized form of the unordered list. [the section called "The <ul> Tag"]

The <dir> Tag

The designers of HTML originally dedicated the <dir> tag for displaying lists of files. As such, the browser, if it treats <dir> and <ul> differently at all (most don't), expects the various list elements to be quite short, possibly no longer than 20 characters or so. Some browsers display the elements in a multicolumn format and may not use a leading bullet.

As with the unordered list, define directory list items with the <li> tag. When used within a directory list, however, the <li> tag may not contain any block element, including paragraphs, other lists, preformatted text, or forms.

The following example puts the directory tag to its traditional task of presenting a list of filenames:

The distribution tape has the following files on it:
<dir>
  <li><code>README</code>
  <li><code>Makefile</code>
  <li><code>main.c</code>
  <li><code>config.h</code>
  <li><code>util.c</code>
</dir>

Notice that we use the <code> tag to ensure that the filenames would be rendered in an appropriate manner (see Figure 8.8).

Like the other formatting tags we've seen so far, the <dir> tag has an optional compact attribute for producing an even more reduced list display, even though virtually none of the browsers is either willing or capable of compacting directory lists.

You can change the style used to bullet the <dir> list items with the type attribute extension and the values circle, square, or disc. This behavior is identical to the type attribute in an unordered list.

The style and class attributes

The style attribute for the <dir> tag creates an inline style for the elements enclosed by the tag, overriding any other style rule in effect. The class attribute lets you format the content according to a predefined class of the <dir> tag; its value is the name of that class. [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"]


Previous Home Next
Nesting Lists Book Index Menu Lists

HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell