Placing 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. However, a better approach to indenting text is to use the <blockquote> tag, which indents content without the presumption of a definition.

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>

By the Way

Nesting refers to a tag that appears entirely within another tag, such as the <dd> tag appearing within the <dl> tag in the preceding example. Nested tags are also referred to as child tags of the (parent) tag that contains them. It is a common (but not required) coding practice to indent nested tags so that you can easily see their relationship to the parent tag.

Just make sure that you always have the same number of closing </dl> tags as opening <dl> tags. Indenting your code so that the opening and closing tags are aligned can help make sure that you have the correct number of matched tags definition lists.

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

Listing 5.3. Using Lists to Build Outlines

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Vertebrates</title>
  </head>

  <body>
    <h2>Vertebrates</h2>
    <ul>
      <li>
        Fish
        <ul>
          <li>Barramundi</li>
          <li>Kissing Gourami</li>
          <li>Mummichog</li>
        </ul>
      </li>
      <li>
        Amphibians
        <ul>
          <li>
            Anura
            <ul>
              <li>Goliath Frog</li>
              <li>Poison Dart Frog</li>
              <li>Purple Frog</li>
            </ul>
          </li>
          <li>
            Caudata
            <ul>
              <li>Hellbender</li>
              <li>Mudpuppy</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        Reptiles
        <ul>
          <li>Nile Crocodile</li>
          <li>King Cobra</li>
          <li>Common Snapping Turtle</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

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

As definition lists shown in Figure 5.3, a web browser 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 style="list-style-type:disc"> , <ul style="list-style-type:circle"> , or <ul style="list-style-type:square"> instead of <ul> .

You can even change the bullet for any single point within an unordered list by using the list-style-type style rule 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 style="list-style-type:circle">
  <li>extra</li>
  <li>super</li>
  <li style="list-style-type:square">special</li>
</ul>

The list-style-type style rule 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. Listing 5.4 shows how to use Roman numerals ( list-style-type:upper-roman ), capital letters ( list-style-type:upper-alpha ), and lowercase letters ( list-style-type:lower-alpha ) along with ordinary numbers in a multilevel list. In Figure 5.4, you can see the resulting nicely formatted outline.

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

Although Listing 5.4 uses the list-style-type style rule only with the <ol> tag, you can also use it for specific <li> tags within a list (though it's hard to imagine a situation in which you would want to). You can also explicitly specify ordinary numbering with list-style-type:decimal , and you can make lowercase Roman numerals with list-style-type:lower-roman .

Listing 5.4. Using the `list-style-type` Style Rule with the `style` Attribute in Multitiered Lists

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Advice from the Golf Guru</title>
  </head>

  <body>
    <h2>How to Win at Golf</h2>
    <ol style="list-style-type:upper-roman">
      <li>Training
        <ol>
          <li>Mental prep
            <ol style="list-style-type:upper-alpha">
              <li>Watch PGA on TV religiously</li>
              <li>Get that computer game with Jack whatsisname</li>
              <li>Rent "personal victory" subliminal tapes</li>
            </ol>
          </li>
          <li>Equipage
            <ol style="list-style-type:upper-alpha">
              <li>Make sure your putter has a pro autograph on it</li>
              <li>Pick up a bargain bag of tees-n-balls at Costco</li>
            </ol>
          </li>
          <li>Diet
            <ol style="list-style-type:upper-alpha">
              <li>Avoid baseball or football food
                <ol style="list-style-type:lower-alpha">
                  <li>No hotdogs</li>
                  <li>No pretzels</li>
                  <li>No peanuts and Crackerjacks</li>
                </ol>
              </li>
              <li>Drink cheap white wine only, no beer</li>
            </ol>
          </li>
        </ol>
      </li>
      <li>Pre-game
        <ol>
          <li>Dress
            <ol style="list-style-type:upper-alpha">
              <li>Put on shorts, even if it's freezing</li>
              <li>Buy a new hat if you lost last time</li>
            </ol> definition lists
          </li>
          <li>Location and Scheduling
            <ol style="list-style-type:upper-alpha">
              <li>Select a course where your spouse won't find you</li>
              <li>To save on fees, play where your buddy works</li>
            </ol>
          </li>
          <li>Opponent
            <ol style="list-style-type:upper-alpha">
              <li>Look for: overconfidence, inexperience</li>
              <li>Shun: suntan, stethoscope, strident walk, Florida accent</li>
              <li>Buy opponent as many pre-game drinks as possible</li>
            </ol>
          </li>
        </ol>
      </li>
      <li>On the Course
        <ol>
          <li>Tee first, then develop severe hayfever</li>
          <li>Drive cart over opponent's ball to degrade aerodynamics</li>
          <li>Say "fore" just before ball makes contact with opponent</li>
          <li>Always replace divots when putting</li>
          <li>Water cooler holes are a good time to correct any errors in ball
          placement</li>
          <li>Never record strokes taken when opponent is urinating</li>
        </ol>
      </li>
    </ol>
  </body>
</html> definition lists

By the Way

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 Sams Publishing website at http://www.samspublishing.com/.

Buy on amazon.com >>

Oliver D., Morrison M

<< Previous page

Table of contents

Next page >>

Flylib.com

Category list

Similar pages

Placing Lists Within Lists