Unordered Lists

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, such as "Related Kumquat Lovers' Sites," allies the items in an unordered list, but they have no order among themselves.

The <ul> Tag

The <ul> tag signals to the browser that the following content, between it and the </ul> end tag, is an unordered list of items. Inside, a leading <li> tag identifies each item in the unordered list. Otherwise, nearly anything HTML/XHTML-wise goes, including other lists, text, and multimedia elements.



Defines an unordered list


class, compact , dir, id, lang, onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, style, title, type

End tag

</ul>; never omitted



Used in


Typically, the browser adds a leading bullet character and formats each unordered list 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), 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, as shown in Figure:

Popular Kumquat recipes:
  <li>Pickled Kumquats</li>
  <li>'Quats and 'Kraut (a holiday favorite!)</li>

There are so many more to please every palate!

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

The type attribute

The graphical browsers automatically bullet each <li>-tagged item in an unordered list. Netscape and Firefox use a diamond like that shown in Figure, whereas Internet Explorer and Opera 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 the value of disc, circle, or square. All the items within that list 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 (CSS), the World Wide Web Consortium (W3C) has deprecated the type attribute in HTML 4 and in XHTML. Expect it to disappear.

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; it also 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.

The style and class attributes

The style and class attributes bring CSS-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, instead of using the common 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 stylesheet. For more information, see Chapter 8. [Inline Styles: The style Attribute, 8.1.1][Style Classes, 8.3]

The lang and dir attributes

The lang attribute lets you specify the language used within a list, and dir lets you advise the browser in which direction the text should be displayed. The value of the lang attribute is any of the International Organization for Standardization (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. [The lang attribute,]

The dir attribute tells the browser in which direction to display the list contentsfrom left to right (dir=ltr), like English and French, or from right to left (dir=rtl), as with Hebrew and Chinese. [The dir attribute,]

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 stylesheet selector, and for a host of other applications. [The id attribute,]

You also can use the optional title attribute and quote-enclosed string value to identify the list. Unlike an id attribute, a title does not have to be unique. [The title attribute,]

The event attributes

The many user-related events that may happen in and around a list, such as when a user clicks or double-clicks within its display space, are recognized by current browsers. With the respective on attribute and value, you may react to those events by displaying a user dialog box or activating some multimedia event. [JavaScript Event Handlers, 12.3.3]

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows