Lists, Lists, and More Lists

In addition to headings and paragraphs, probably the most common HTML element you'll use is the list. After this section, you'll not only know how to create a list in HTML, but also how to create several different types of listsa list for every occasion!

HTML 4.01 defines these three types of lists:

• Numbered or ordered lists, which are typically labeled with numbers

• Bulleted or unordered lists, which are typically labeled with bullets or some other symbol

• Glossary lists, in which each item in the list has a term and a definition for that term, arranged so that the term is somehow highlighted or drawn out from the text

Note

You'll also notice a couple of deprecated list types in the HTML 4.01 specification: menu lists (<menu>) and directory lists (<dir>). These two list types aren't frequently used and support for them varies in browsers. Instead, use the <ul> (or bulleted list) tags in place of these deprecated list types.

A deprecated tag or attribute is one that has been marked for removal from future specifications and products. It may still be supported for historical reasons, but when you create new pages you should not use deprecated elements or attributes, because future support for them is not guaranteed.

Note

Browsers generally continue to support deprecated elements for reasons of backward compatibility. There's still a need to learn about the deprecated elements because you might run into them in existing pages.

The majority of tags and attributes that are deprecated in HTML 4.01 are done so in favor of using Cascading Style Sheet (CSS) properties and values.

List Tags

All the list tags have the following common elements:

• The entire list is surrounded by the appropriate opening and closing tag for the type of list (for example, <ul> and </ul> for unordered lists, or <ol> and </ol> for ordered lists).

• Each list item within the list has its own tag: <dt> and <dd> for the glossary lists, and <li> for all the other lists.

Note

The closing tags for <dd>, <dt>, and <li> were optional in HTML. To comply with XHTML 1.0, use closing tags of </dd>, </dt>, </li>.

Although the tags and the list items can be formatted any way you like in your HTML code, I prefer to arrange the tags so that the list tags are on their own lines and each new item starts on a new line. This way, you can easily select the whole list as well as the individual elements. In other words, I find the following HTML

<p>Dante's Divine Comedy consists of three books:</p> <ul> <li>The Inferno</li> <li>The Purgatorio</li> <li>The Paradiso</li> </ul>

easier to read than

<p>Dante's Divine Comedy consists of three books:</p> <ul><li>The Inferno</li><li>The Purgatorio</li><li>The Paradiso</li></ul>

although both result in the same output in the browser.

Numbered Lists

Numbered lists are surrounded by the <ol>...</ol> tags (ol stands for ordered list), and each item within the list is included in the <li>...</li> (list item) tag.

Note

In HTML, the <li> tag is one-sided; you don't have to specify the closing tag because it's optional. The existence of the next <li> (or the closing </ol> or </ul> tag) indicates the end of that item in the list. However, for your documents to conform to the XHTML 1.0 specification, you must use a closing tag of </li>.

When the browser displays an ordered list, it numbers (and often indents) each of the elements sequentially. You don't have to perform the numbering yourself and, if you add or delete items, the browser renumbers them the next time the page is loaded.

Ordered lists are lists in which each item is numbered or labeled with a counter of some kind (like letters or roman numerals).

Use numbered lists only when the sequence of items on the list is relevant. Ordered lists are good for steps to follow or instructions to the readers, or when you want to rank the items in a list. If you just want to indicate that something has a number of elements that can appear in any order, use an unordered list instead.

For example, the following is an ordered list of steps that explain how to install a new operating system. You can see how the list is displayed in a browser in Figure 4.4.

Input

<p>Installing Your New Operating System</p>  <ol> <li>Insert the CD-ROM into your CD-ROM drive.</li> <li>Choose RUN.</li> <li>Enter the drive letter of your CD-ROM (example: D:\), followed by SETUP.EXE.</li> <li>Follow the prompts in the setup program.</li> <li>Reboot your computer after all files are installed.</li> <li>Cross your fingers.</li> </ol>

Output

Figure 4.4. An ordered list in HTML.

Customizing Ordered Lists

The HTML 3.2 recommendation described several attributes for ordered lists. They were used to customize ordered lists. These attributes enabled you to control several features of ordered lists including which numbering scheme to use and from which number to start counting (if you don't want to start at 1). In HTML 4.01 and XHTML 1.0, the attributes mentioned in this section are deprecated in favor of using style sheet properties and values that accomplish the same task. To support older browsers, however, you might need to use these attributes on occasion.

Attributes are extra parts of HTML tags that contain options or other information about the tag itself. To comply with the XHTML specification, you must include a value for every attribute, and enclose those values in quotation marks.

You can customize ordered lists in two main ways: how they're numbered and the number with which the list starts. HTML 3.2 provides the type attribute that can take one of five values to define which type of numbering to use on the list:

• "1" Specifies that standard Arabic numerals should be used to number the list (that is, 1, 2, 3, 4, and so on)

• "a" Specifies that lowercase letters should be used to number the list (that is, a, b, c, d, and so on)

• "A" Specifies that uppercase letters should be used to number the list (that is, A, B, C, D, and so on)

• "i" Specifies that lowercase Roman numerals should be used to number the list (that is, i, ii, iii, iv, and so on)

• "I" Specifies that uppercase Roman numerals should be used to number the list (that is, I, II, III, IV, and so on)

You can specify types of numbering in the <ol> tag, as follows: <ol type="a">. By default, type="1" is assumed.

Note

The nice thing about web browsers is that they generally ignore attributes they don't understand. If a browser didn't support the type attribute of the <ol> tag, for example, it would simply ignore it when it's encountered.

As an example, consider the following list:

<p>The Days of the Week in French:</p> <ol> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> <li>Jeudi</li> <li>Vendredi</li> <li>Samedi</li> <li>Dimanche</li> </ol>

If you were to add type="I" to the <ol> tag, as follows, it would appear in a browser as shown in Figure 4.5.

Input

<p>The Days of the Week in French:</p> <ol type="I"> <li>Lundi</li> <li>Mardi</li> <li>Mercredi</li> <li>Jeudi</li> <li>Vendredi</li> <li>Samedi</li> <li>Dimanche</li> </ol>

Output

Figure 4.5. An ordered list displayed using an alternative numbering style.

You also can apply the type attribute to the <li> tag, effectively changing the numbering type in the middle of the list. When the type attribute is used in the <li> tag, it affects the item in question and all entries following it in the list. Using the start attribute, you can specify the number or letter with which to start your list. The default starting point is 1, of course. You can change this number by using start. <ol start="4">, for example, would start the list at number 4, whereas <ol type="a" start="3"> would start the numbering with c and move through the alphabet from there.

For example, you can list the last six months of the year, and start numbering with the Roman numeral VII as follows. The results appear in Figure 4.6.

Input

<p>The Last Six Months of the Year (and the Beginning of the NextYear):</p> <ol type="I" start="7"> <li>July</li> <li>August</li> <li>September</li> <li>October</li> <li>November</li> <li>December</li> <li type="1">January</li> </ol>

Output

Figure 4.6. An ordered list with an alternative numbering style and starting number.

As with the type attribute, you can change the value of an entry's number at any point in a list. You do so by using the value attribute in the <li> tag. Assigning a value in an <li> tag restarts numbering in the list starting with the affected entry.

Suppose that you wanted the last three items in a list of ingredients to be 10, 11, and 12 rather than 6, 7, and 8. You can reset the numbering at Eggs using the value attribute, as follows:

<p>Cheesecake ingredients:</p> <ol type="I"> <li>Quark Cheese</li> <li>Honey</li> <li>Cocoa</li> <li>Vanilla Extract</li> <li>Flour</li> <li value="10">Eggs</li> <li>Walnuts</li> <li>Margarine</li> </ol>

Note

In this section's examples, all the attribute values are enclosed in quotation marks. Most web browsers don't require you to use quotation marks this way, but XHTML 1.0 does.

Unordered Lists

In unordered lists, the elements can appear in any order. An unordered list looks just like an ordered list in HTML except that the list is created by using <ul>...</ul> tags rather than ol. The elements of the list are placed within <li> tags, just as with ordered lists.

Browsers usually format unordered lists by inserting bullets or some other symbol; Lynx, a text browser, inserts an asterisk (*).

The following input and output example shows an unordered list. Figure 4.7 shows the results in a browser.

Input

<p>Things I like to do in the morning:</p> <ul> <li>Drink a cup of coffee</li> <li>Watch the sunrise</li> <li>Listen to the birds sing</li> <li>Hear the wind rustling through the trees</li> <li>Curse the construction noises for spoiling the peaceful mood</li> </ul>

Output

Figure 4.7. An unordered list.

Customizing Unordered Lists

As with ordered lists, unordered lists can be customized with HTML 3.2 attributes. (These are also deprecated in HTML 4.01.) By default, most browsers, including Netscape and Internet Explorer, use bullets to delineate entries on unordered lists. Text browsers such as Lynx generally opt for an asterisk.

If you use the type attribute in the <ul> tag, some browsers can display other types of markers. According to the HTML 3.2 specification, the type attribute can take three possible values:

• "disc" A disc or bullet; this style is the default.

• "square" Obviously, a square rather than a disc.

• "circle" As compared with the disc, which most browsers render as a filled circle, this value should generate an unfilled circle.

In the following input and output example, you see a comparison of these three types as rendered in a browser (see Figure 4.8).

Input

<ul type="disc">   <li>DAT - Digital Audio Tapes</li>   <li>CD - Compact Discs</li>   <li>Cassettes</li> </ul> <ul type="square">   <li>DAT - Digital Audio Tapes</li>   <li>CD - Compact Discs</li>   <li>Cassettes</li> </ul> <ul type="circle">   <li>DAT - Digital Audio Tapes</li>   <li>CD - Compact Discs</li>   <li>Cassettes</li> </ul>

Output

Figure 4.8. Unordered lists with different bullet types.

Just as you can change the numbering scheme in the middle of an ordered list, you can change the type of bullet midstream in a list by using the type attribute in the <li> tag. Again, this attribute is deprecated in HTML 4.01.

An alternative approach is to use style declarations to specify the bullet type for a list or list item. The property to set is list-style-type. To change the style from disc (the default) to square, you would use the following tag:

<ol style="list-style-type: square"> </ol>

The list-style-type property is also used to control the numbering style used for ordered lists. The valid values are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none. If you set it to none, no bullet or numbering will be shown for the list.

You can also alter this property for individual items in a list. For example, you could create a list like this:

<ol style="list-style-type: circle">     <li style="list-style-type: square">One</li>     <li style="list-style-type: disc">Two</li>     <li>Three</li> </ol>

There are a number of other properties associated with lists. The list-style-type property simply provides an alternative to the deprecated type attribute. With CSS, you can go much further. For example, using the white-space property, you can define how white space is handled when lists are rendered. By default, a line break follows every list item.

You can change that to pre, which prints the text exactly as it is formatted in the source, or nowrap, which leaves out the line breaks.

If you don't like any of the bullet styles used in unordered lists, you can substitute an image of your own choosing in place of them. To do so, use the list-style-image property. By setting this property, you can use an image of your choosing for the bullets in your list. Here's an example:

<ul style="list-style-image: url(/bullet.gif)">     <li>Example</li> </ul>

Don't worry much about what this all means right now. I'll discuss images later in Lesson 7, "Adding Images, Color, and Backgrounds." Right now, all you need to know is that the URL in parentheses should point to the image you want to use.

As you've seen in the screenshots so far, when items are formatted in a list and the list item spans more than one line, the lines of text that follow the first are aligned with the beginning of the text on the first line. If you prefer that they begin at the position of the bullet or list number, use the list-style-position property:

<ul style="list-style-position: inside">     <li>Example</li> </ul>

The default value is outside, and the only alternative is inside. Finally, if you want to modify several list-related properties at once, you can simply use the list-style property. You can specify three values for list-style: the list style type, the list style position, and the URL of the image to be used as the bullet style. This property is just a shortcut for use if you want to manipulate several of the list-related properties at once. Here's an example:

<ul style="list-style: circle inside URL(/bullet.gif)">     <li>Example</li> </ul>

Bear in mind that not all browsers support the manipulation of these propertiesin particular, older browsers almost certainly don't.

Glossary Lists

Glossary lists are slightly different from other lists. Each list item in a glossary list has two parts:

• A term

• The term's definition

Each part of the glossary list has its own tag: <dt> for the term (definition term), and <dd> for its definition (definition definition). <dt> and <dd> usually occur in pairs, although most browsers can handle single terms or definitions. The entire glossary list is indicated by the tags <dl>...</dl> (definition list).

The following is a glossary list example with a set of herbs and descriptions of how they grow:

<dl> <dt>Basil</dt> <dd>Annual. Can grow four feet high; the scent of its tiny white flowers is heavenly</dd> <dt>Oregano</dt> <dd>Perennial. Sends out underground runners and is difficult to get rid of once established.</dd> <dt>Coriander</dt> <dd>Annual. Also called cilantro, coriander likes cooler weather of spring and fall.</dd> </dl>

Glossary lists usually are formatted in browsers with the terms and definitions on separate lines, and the left margins of the definitions are indented.

You don't have to use glossary lists for terms and definitions, of course. You can use them anywhere that the same sort of list is needed. Here's an example:

<dl> <dt>Macbeth</dt> <dd>I'll go no more. I am afraid to think of what I have done; look on't again I dare not.</dd> <dt>Lady Macbeth</dt> <dd>Infirm of purpose! Give me the daggers. The sleeping and the dead are as but pictures. 'Tis the eye if childhood that fears a painted devil. If he do bleed, I'll gild the faces if the grooms withal, for it must seem their guilt. (Exit. Knocking within)</dd> <dt>Macbeth</dt> <dd>Whence is that knocking? How is't wit me when every noise apalls me? What hands are here? Ha! They pluck out mine eyes! Will all Neptune's ocean wash this blood clean from my hand? No. This my hand will rather the multitudinous seas incarnadine, making the green one red. (Enter Lady Macbeth)</dd> <dt>Lady Macbeth</dt> <dd>My hands are of your color, but I shame to wear a heart so white.</dd> </dl>

The following input and output example shows how a glossary list is formatted in a browser (see Figure 4.9).

Input

<dl> <dt>Basil</dt> <dd>Annual. Can grow four feet high; the scent of its tiny white flowers is heavenly.</dd> <dt>Oregano</dt> <dd>Perennial. Sends out underground runners and is difficult to get rid of once established.</dd> <dt>Coriander</dt> <dd>Annual. Also called cilantro, coriander likes cooler weather of spring and fall.</dd> </dl>

Output

Figure 4.9. A glossary list.

Nesting Lists

What happens if you put a list inside another list? Nesting lists is fine as far as HTML is concerned; just put the entire list structure inside another list as one of its elements. The nested list just becomes another element of the first list, and it's indented from the rest of the list. Lists like this work especially well for menu-like entities in which you want to show hierarchy (for example, in tables of contents) or as outlines.

Indenting nested lists in HTML code itself helps show their relationship to the final layout:

<ol>   <ul>   <li>WWW</li>   <li>Organization</li>   <li>Beginning HTML</li>   <ul>    <li>What HTML is</li>    <li>How to Write HTML</li>    <li>Doc structure</li>    <li>Headings</li>    <li>Paragraphs</li>    <li>Comments</li>   </ul> <li>Links</li> <li>More HTML</li> </ol>

Many browsers format nested ordered lists and nested unordered lists differently from their enclosing lists. They might, for example, use a symbol other than a bullet for a nested list, or number the inner list with letters (a, b, c) rather than numbers. Don't assume that this will be the case, however, and refer back to "section 8, subsection b" in your text because you can't determine what the exact formatting will be in the final output. If you do need to be sure which symbols or numbering scheme will be used for a list, specify a style using CSS.

The following input and output example shows a nested list and how it appears in a browser (see Figure 4.10).

Input

<h1>Peppers</h1> <ul> <li>Bell</li> <li>Chile</li>   <ul>   <li>Serrano</li>   <li>Jalapeno</li>   <li>Habanero</li>   <li>Anaheim</li>   </ul> <li>Szechuan</li> <li>Cayenne</li> </ul>

Output

Figure 4.10. Nested lists.

DO	DON'T
DO remember that you can change the numbering and bullet styles for lists to suit your preference.	DON'T use the deprecated list types; use one of the other lists instead.
DO feel free to nests lists to any extent that you like.	DON'T number or format lists yourself; use the list tags. DON'T use list tags to indent text on a page; use Cascading Style Sheets.