Lists | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Modern HTML has three basic forms of lists: ordered lists ( <ol> ), unordered lists ( <ul> ), and definition lists ( <dl> ). Lists are block-level, although they can be nested, and their items can contain other block-level structures, such as paragraphs.

Ordered Lists

An ordered list, as enclosed by <ol> and </ol> , defines a list in which order matters. Ordering typically is rendered by a numbering scheme, using Arabic numbers , letters , or Roman numerals. Ordered lists are suitable for creating simple outlines or step-by-step instructions because the list items are automatically numbered by the browser. List items in ordered and other lists are defined by using the list item tag, <li> , which doesn't require an end tag under traditional HTML. For XHTML compliance, however, the use of the closing </li> tag is required. List items usually are indented by the browser. Numbering starts from one. A generic ordered list looks like this:

  <ol>   <li>   Item 1   </li>   <li>   Item 2   </li>  . . .  <li>   Item n   </li>   </ol>

Note	In many browsers, the <li> tag has a rendering outside a list. It often renders as a nonindented bullet. Some books recommend using <li> in this way. This isn't correct practice given the HTML/XHTML content model. It should be avoided.

The <ol> tag has three basic attributes, none of which is required: compact , start , and type . The compact attribute requires no value under traditional HTML but under XHTML, which allows no attributes without values, it is set to a value of compact, like so:

  <ol compact="compact">

It simply suggests that the browser attempt to compact the list, to use less space onscreen. In reality, most browsers ignore the compact attribute.

The type attribute of <ol> can be set to a for lowercase letters, A for uppercase letters, i for lowercase Roman numerals, I for uppercase Roman numerals, or 1 for regular numerals. The numeral 1 is the default value. Remember that the type attribute within the <ol> tag sets the numbering scheme for the whole list, unless it is overridden by a type value in an <li> tag. Each <li> tag can have a local type attribute set to a , A , i , I , or 1 . Once an <li> element is set with a new type, it overrides the numbering style for the rest of the list, unless another <li> sets the type attribute.

The <ol> element also has a start attribute that takes a numeric value to begin the list numbering. Whether the type attribute is a letter or a numeral, the start value must be a number. To start ordering from the letter j , you would use <ol type="a" start="10"> because j is the tenth letter. An <li> tag within an ordered list can override the current numbering with the value attribute, which also is set to a numeric value. Numbering of the list should continue from the value set.

Note

Numbering lists to count backward from 10 to 1 or to count by twos or other values is not directly possible in HTML. I believe that a single addition of a step attribute could address this, but it appears that the few remaining holes in HTML have been left unfilled. Instead, CSS is left to address this, which unfortunately is taking far too long.

Lists can be nested, but the syntax is widely misunderstood. Commonly, on the Web, markup such as

  <ol>   <li>   Item 1   </li>   <ol>   <li>  Item a  </li>  . . .  <li>  Item z  </li>   </ol>  ...  <li>   Item n   </li>   </ol>

is used. However, the content model of HTML and XHTML lists only allows list items inside of lists, so the correct syntax is actually

  <ol>   <li>   Item 1   <ol>   <li>   Item a   </li>  . . .  <li>   Item   z</li>   </ol>   </li>  ...  <li>   Item n   </li>   </ol>

A complete example of ordered lists and their attributes is shown next , the rendering of which is shown in Figure 3-7:

Figure 3-7: Rendering of ordered list example

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Ordered List Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <p>  Ordered lists can be very simple.  </p>   <ol>   <li>  Item 1  </li>   <li>  Item 2  </li>   <li>  Item 3  </li>   </ol>   <p>  Ordered lists can have a variety of types.  </p>   <ol>   <li type="a">  Lowercase letters  </li>   <li type="A">  Uppercase letters  </li>   <li type="i">  Lowercase Roman numerals  </li>   <li type="I">  Uppercase Roman numerals  </li>   <li type="1">  Arabic numerals  </li>   </ol>   <p>  Ordered lists can start at different values and with different types.  </p>   <ol start="10" type="a">   <li>  This should be j  </li>   <li value="3">  This should be c  <ol>   <li>  Lists can nest  <ol>   <li>  Nesting depth is unlimited  </li>   </ol>   </li>   </ol>   </li>   </ol>   </body>   </html>

Note

When dealing with extremes, use numbering with caution. Negative values or very large values produce unpredictable results. Whereas Navigator ignores negative numbers, Internet Explorer numbers up toward zero. Browsers can allocate a fixed width to the left of a list item to display its number. Under Navigator, a list not embedded in another block structure can accommodate only about four digits; larger numbers can overwrite list elements. A list indented by nesting in another block structure could have more space. Numbering in both Navigator and Internet Explorer loses meaning with large integer values, most likely because of limitations within the operating environment.

Unordered Lists

An unordered list, signified by <ul> and </ul> , is used for lists of items in which the ordering is not specific. This can be useful in a list of features and benefits for a product. A browser typically adds a bullet of some sort (a filled circle, a square, or an empty circle) for each item and indents the list.

Like ordered lists, unordered lists can be nested. However, in this case each level of nesting indents the list farther, and the bullet changes accordingly . Generally , a filled circle or solid round bullet is used on the first level of lists. An empty circle is used for the second-level list. Third-level nested lists generally use a square. These renderings for bullets are common to browsers, but shouldn't be counted on. Under transitional forms of HTML and XHTML, the type attribute can be used to set the bullet type for a list. Under strict variants, CSS should be used instead. The type attribute can appear within the <ul> tag and set the type for the whole list, or it can appear within each <li> . A type value in an <li> tag overrides the value for the rest of the list, unless it is overridden by another type specification. The allowed values for type are disc , circle , or square . This is commonly supported in browsers, but small variations exist. For example, in the case of MSN TV (formerly WebTV), a triangle bullet type also is available, because on a television a circle and square generally look the same due to limited resolution. For the greatest level of cross-browser compatibility, authors are encouraged to set the bullet type only for the list as a whole.

Note	Internet Explorer 3.0 “level browsers under Windows don't render type settings for unordered lists. This has been fixed under Internet Explorer 4.0 and beyond.

The following is an example of unordered lists, various renderings of which are shown in Figure 3-8:

Figure 3-8: Rendering of unordered list example

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Unordered List Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <ul>   <li>  Unordered lists  <ul>   <li>  can be nested.  <ul>   <li>  Bullet changes on nesting.  </li>   </ul>   </li>   </ul>   </li>   </ul>   <p>  Bullets can be controlled with the  <b>  type  </b>  attribute.  <b>  Type  </b>  can be set for the list as a whole or item by item.  </p>   <ul type="square">   <li>  First item bullet shape set by ul  </li>   <li type="disc">  Disc item  </li>   <li type="circle">  Circle item  </li>   <li type="square">  Square item  </li>   </ul>   </body>   </html>

Definition List

A definition list is a list of terms paired with associated definitions ”in other words, a glossary. Definition lists are enclosed within <dl> and </dl> . Each term being defined is indicated by a <dt> element, which is derived from "definition term." Each definition itself is defined by <dd> . Neither the dt nor the dd elements require a close tag under traditional HTML, yet given potentially long definitions and conformance to XHTML, the close tags should never be omitted. It is interesting to note that <dt> and <dd> tags are not required to be used in pairs, although they usually are. The following is a basic example using <dl> , the rendering of which is shown in Figure 3-9:

Figure 3-9: Rendering of definition list example

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Definition List Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h1 align="center">  Definitions  </h1>   <dl>   <dt>  Gadget  </dt>   <dd>  A useless device used in many HTML examples.  </dd>   <dt>  Gizmo  </dt>   <dd>  Another useless device used in a few HTML examples.  </dd>   </dl>   </body>   </html>

Vestigial Lists: <dir> and <menu>

Beyond basic ordered, unordered, and definition lists, two other lists are specified under traditional HTML: <menu> and <dir> . They were supposed to specify short menus of information and directory listings respectively, yet these rarely used elements generally appear as unordered lists in most browsers. Presented here solely for completeness, Web developers are warned to avoid using <menu> or <dir> because they have been dropped from the strict versions of HTML and XHTML.

Using Lists for Presentation

Because definition lists don't add numbering or bullets, many HTML writers have used this element to indent text. Although functionally this is the most appropriate way other than <blockquote> to achieve some rudimentary indentation without CSS, the unordered list often is used instead. The use of <ul> instead of <dl> to indent text quickly is unfortunately very common despite the fact that it is not valid markup. The most likely reason for this preference for <ul> is that it requires fewer elements to achieve indentation. A simple example of indenting with lists is shown next, with its rendering shown in Figure 3-10:

Figure 3-10: Example of lists for presentation

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  List Indent Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <dl>   <dd><p>  This paragraph is indented. Watch out for          the left edge. Get too close and you'll hurt yourself!  </p></dd>   </dl>   <br /><br />   <!-- Warning: markup below is not valid XHTML  -->   <ul><ul>   <p>  This paragraph is even further indented. Many HTML authors      and authoring tools use this style to indent because      it takes fewer tags, but it is not standards based and      really should not be used.  </p>   </ul></ul>   <!-- End invalid markup -->   </body>   </html>

Note

Most HTML purists are offended by the use of <ul> to indent. If you really must use HTML for presentation, consider using the definition list or tables, if possible, to indent text. However, with WYSIWYG editors spitting out ul elements in mass numbers, this might be more of a fine point than a real issue. The rise of style sheets and other technologies should, finally in time, put an end to this question.

< Day Day Up >