• Choose a category
• All
• Classic-Fiction

Basic Ordered List

Top ten dog names in the USA

1. Max
2. Jake
3. Buddy
4. Maggie
5. Bear
6. Molly
7. Bailey
8. Shadow
9. Sam
10. Lady

data from http://www.bowwow.com.au

The only change is the list tag itself. Rather than the

tag, the ordered list uses the
indicator. The list items are the same
pairs used in the unordered list.

You don’t indicate the item number anywhere; it generates automatically based on the position of each item within the list. Therefore, you can change the order of the items, and the numbers are still correct.

This is where it’s great that XHTML is about meaning, not layout. If you specified the actual numbers, it’d be a mess to move things around. All that really matters is that the element is inside an ordered list.


Making nested lists

Sometimes, you’ll want to create outlines or other kinds of complex data in your pages. You can easily nest lists inside each other, if you want. Figure 4-3 shows a more complex list describing popular cat names in the U.S. and Australia.

Figure 4-3:

An ordered list inside an unordered list!

Figure 4-3 uses a combination of lists to do its work. This figure contains a list of two countries: the U.S. and Australia. Each country has an H3 heading and another (ordered) list inside it. You can nest various elements inside a list, but you have to do it carefully if you want the page to validate.

In this example, there’s an unordered list with only two elements. Each of these elements contains an

heading and an ordered list. The page handles all this data in a relatively clean way and validates correctly.


Examining the nested list example

The entire code for nestedList.html is reproduced here:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Nested Lists

Popular Cat Names

• USA

  1. Tigger
  2. Tiger
  3. Max
  4. Smokey
  5. Sam

• Australia

  1. Oscar
  2. Max
  3. Tiger
  4. Sam
  5. Misty

Here are a few things you might notice in this code listing:

♦ There’s a large

set surrounding the entire main list.

♦ The main list has only two list items.

♦ Each of these items represents a country.

♦ Each country has an

element, describing the country name inside the

.

♦ Each country also has an

set with a list of names.

♦ The indentation really helps you see how things are connected.

Indenting your code

You might have noticed that I indent all the XHTML code in this book. The browsers ignore all indentation, but it’s still an important coding habit.

There are many opinions about how code should be formatted, but the standard format I use in this book will serve you well until you develop your own style.

Generally, I use the following rules to indent HTML/XHTML code:

♦ Indent each nested element. Because the tag is inside the element, I indent to indicate this. Likewise, the

1. elements are always indented inside
   or
   pairs.

   ♦ Line up your elements. If an element takes up more than one line, line up the ending tag with the beginning tag. This way, you know what ends what.

   ♦ Use spaces, not tabs. The tab character often causes problems in source code. Different editors format tabs differently, and a mixture of tabs and spaces can make your carefully formatted page look awful when you view it in another editor.

   If you are using Aptana (and you really should consider it if you’re not