HTML..XHTML.The.Definitive.Guide..5th.Ed.1002002 [Electronic resources] نسخه متنی

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. [<li>]

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

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

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

7.1.1.3 The class and style 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, rather than 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 style sheet. For more
information, see Chapter 8. [Section 8.1.1] [Section 8.3]

7.1.1.4 The lang and dir attributes

The lang attribute lets you specify the
language used within a list, and dir lets you
advise the browser which direction the text should be displayed in.
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 3.6.1.2]

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

7.1.1.5 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 4.1.1.4]

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. [Section 4.1.1.4]

7.1.1.6 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.Section 12.3.3]