4.5. Nesting Lists

You can nest lists of the same or different types as necessary. For example, you can generate a list similar to the following, incorporating an ordered list within an unordered one:

  • Call the number below.

  • Send us a letter, being sure to include the following:

    1. Your full name

    2. Your order number

    3. Your contact information

    4. A detailed description of the problem

  • Use the Web form to send us an e-mail.

This combination of lists can be constructed using the following code and results in the display shown in Figure 4-7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
  <title>Example Nested Lists</title>
</head>
<body>
<p>
<ul>
  <li>Call the number below</li>
  <li>Send us a letter, being sure to include:</li>
  <ol>
    <li>Your full name</li>
    <li>Your order number</li>
    <li>Your contact information</li>
    <li>A detailed description of the problem</li>
  </ol>
  <li>Use the Web form to send us an email</li>
</ul>
</p>
</body>
</html>
Figure 4-7. Figure 4-7

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial