www.gibmonks.com

Main Page




Previous Page
Next Page

[Page 1340 (continued)]

J.9. Nested and Ordered Lists

Lists may be nested to represent hierarchical relationships, as in an outline format. Figure J.9 demonstrates nested lists and ordered lists (i.e., list that order items by letter or number).

Figure J.9. Nested and ordered lists in XHTML.
(This item is displayed on pages 1341 - 1343 in the print version)

 1  <?xml version = "1.0"?>
 2  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 3     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 4
 5  <!-- Fig. J.9: list.html                 -->
 6  <!-- Advanced Lists: nested and ordered. -->
 7
 8  <html xmlns = "http://www.w3.org/1999/xhtml">
 9     <head>
10        <title>Advanced lists</title>
11     </head>
12
13     <body>
14
15        <h1>The Best Features of the Internet</h1>
16
17        <!-- create an unordered list -->
18        <ul>
19           <li>You can meet new people from countries around
20              the world.</li>
21
22           <li>
23              You have access to new media as it becomes public:
24
25              <!-- start nested list, use modified bullets -->
26              <!-- list ends with closing </ul> tag        -->
27              <ul>
28                 <li>New games</li>
29                 <li>
30                    New applications
31
32                    <!-- ordered nested list -->
33                    <ol type = "I">
34                       <li>For business</li>
35                       <li>For pleasure</li>
36                    </ol>
37
38                 </li>
39
40                 <li>Around the clock news</li>
41                 <li>Search engines</li>
42                 <li>Shopping</li>
43                 <li>
44                    Programming
45
46                    <!-- another nested ordered list -->
47                    <ol type = "a">
48                       <li>XML</li>
49                       <li>Java</li>
50                       <li>XHTML</li>
51                       <li>Scripts</li>
52                       <li>New languages</li>
53                    </ol>
54
55                 </li>
56
57              </ul> <!-- ends nested list started in line 27 -->
58
59           </li>
60
61           <li>Links</li>
62           <li>Keeping in touch with old friends</li>
63           <li>It is the technology of the future!</li>
64
65        </ul>  <!-- ends unordered list started in line 18 -->
66
67        <h1>My 3 Favorite <em>CEOs</em></h1>
68
69        <!-- ol elements without type attribute have -->
70        <!-- numeric sequence type (i.e., 1, 2, ...) -->
71        <ol>
72           <li>Lawrence J. Ellison</li>
73           <li>Steve Jobs</li>
74           <li>Michael Dell</li>
75        </ol>
76
77     </body>
78  </html>


[Page 1341]

The first ordered list begins in line 33. Attribute type specifies the sequence type (i.e., the set of numbers or letters used in the ordered list). In this case, setting type to "I" specifies upper-case roman numerals. Line 47 begins the second ordered list and sets attribute type to "a", specifying lowercase letters for the list items. The last ordered list (lines 7175) does not use attribute type. By default, the list's items are enumerated from one to three.

A Web browser indents each nested list to indicate a hierarchal relationship. By default, the items in the outermost unordered list (line 18) are preceded by discs. List items nested inside the unordered list of line 18 are preceded by circles. Although not demonstrated in this example, subsequent nested list items are preceded by squares. Unordered list items can be explicitly set to discs, circles or squares by setting the ul element's type attribute to "disc", "circle" or "square", respectively.


Previous Page
Next Page