InformIT: Sams Teach Yourself HTML 4 in 24 Hours

Lists Within Lists

Although definition lists are officially supposed to be used for defining terms, many Web page authors use them anywhere they'd like to see some indentation. In practice, you can indent any text simply by putting <dl><dd> at the beginning of it and </dd></dl> at the end.

You can indent items further by nesting one list inside another, like the following:

<dl><dd>this item will be indented</dd>
<dl><dd>this will be indented further</dd>
<dl><dl><dd>and this will be indented very far indeed</dd>
</dl></dl></dl></dl>

Just make sure you always have the same number of closing </dl> tags as opening <dl> tags.

Ordered and unordered lists can also be nested inside one another, down to as many levels as you want. In Figure 5.5, a complex indented outline is constructed from several unordered lists. You'll notice in Figure 5.6 that Netscape Navigator automatically uses a different type of bullet for each of the first three levels of indentation, making the list very easy to read.

Figure 5.5 You can build elaborate outlines by placing lists within lists.

Figure 5.6 Multilevel unordered lists are neatly indented and bulleted for readability.

As shown in Figure 5.6, Netscape Navigator (and Microsoft Internet Explorer) will normally use a solid disc for the first-level bullet, a hollow circle for the second-level bullet, and a solid square for all deeper levels. However, you can explicitly choose which type of bullet to use for any level by using <ul type="disc">, <ul type="circle">, or <ul type="square"> instead of <ul>.

You can even change the bullet for any single point in an unordered list by using the type attribute in the <li> tag. For example, the following would display a hollow circle in front of the words Extra and Super, but a solid square in front of the word Special:

<ul type="circle">
<li>extra</li>
<li>super</li>
<li type="square">special</li>
</ul>

The type attribute also works with ordered lists, but instead of choosing a type of bullet, you choose the type of numbers or letters to place in front of each item. Figure 5.7 shows how to use roman numerals (type="I"), capital letters (type="A"), and lowercase letters (type="a") along with ordinary numbers in a multilevel list. In Figure 5.8, you can see the resulting nicely formatted outline.

Figure 5.7 The type attribute lets you make multitiered lists with both numbered and lettered points.

Figure 5.8 A well-formatted outline can make almost any plan look more plausible.

Although Figure 5.7 only uses the type attribute with the <ol> tag, you can also use it for specific <li> tags within a list (though it's hard to imagine a situation where you would want to). You can also explicitly specify ordinary numbering with type="1", and you can make lowercase roman numerals with type="I".

Here's one more seldom-used but handy-when-you-need-it trick: You can start an ordered list with any number (or letter) with the start attribute. <ol start="3">, for example, starts a numbered list at 3 instead of 1. Individual points can be renumbered with the value attribute (<li value="12"> for example).

Note

By combining ordered, unordered, and definition lists within one another, you can organize the most complex information in a readable and attractive way. To get your creative juices flowing, I've created a list of lists for you to browse through before you begin organizing your own HTML lists.

To check it out, go to the 24-Hour HTML Café at http://24hourhtmlcafe.com/hour5/.

Click the list-o-mania link and have some fun trying to figure out what the real titles of the example lists might be, based on the information they contain. Answers are given—as a nested HTML list, of course—at the end of the page.

To Do

Take a list or two of your own and try to find the best way to present the information so it can be easily understood.

Which type of list or combination of list types best suits your list? Use ordered lists only for lists that do actually have a natural order to them. Try to avoid more than seven bullet points in a row in any unordered list; otherwise, the list will be hard to read. Use definition lists whenever indenting is sufficient to convey the structure of your information.
Start each list (or new level within a multitiered list) with an <ol>, <ul>, or <dl>. Start each point within the list with <li>. Use the type attribute if you want non-standard bullets or letters instead of numbers.
If you want a blank line between list items, use <li><p> and </p></li> instead of just <li> and </li>.
Be very careful to close every <li> list item with a </li> tag. End every <ol> list with </ol>, and make sure that each <ul> or <dl> has a corresponding </ul> or </dl>. Unclosed lists can make pages look very strange, and can even cause some Web browsers not to display the list at all.

Summary | Next Section

Previous Section