Get Down With Markup

So what makes Method D so special? First and foremost, it’s completely valid. A proper unordered list has a containing <ul>
element, with each item within wrapped in opening and closing <li> elements. Now just when you think all we’re going for here is demonstrating how to be valid for valid’s sake, we’ll take a look at it in action.

Because we’ve properly marked up our grocery list, each item will be on a separate line (due to the block-level nature of the <li> and most visual browsers will render a bullet next to each item, as well as indent any wrapping lines that may occur (see Figure 1-3).

Figure 1-3.  Default rendering of an unordered list

Users of PDAs, phones, or other small-screened devices will also be able to view the list in a similar, clearly organized fashion. Because we’ve told the device what the data is (a list in this case), it can best decide how to display it according to its capabilities.

If a long line wraps due to increased text size or a narrow browsing window, the wrapped line will appear indented to line up with the text above it. It’ll be darn clear to distinguish between items no matter what the browsing circumstances.

Summary

Now that I’ve picked each possible method apart, let’s quickly review what I’ve covered about each:

Method A:

• Leaves out the possibility for styling the list uniquely
  
• Could create confusion when longer lines wrap in a narrow column or small-screened device
  
• Lacks semantic meaning

Method B: 's ch

• Adding a bullet helps for signifying a new item, but some browsers may choose not to show it, without its parent <ul> element.
  
• No containing <ul> element or closing <li> elements means difficult to style.
  

Invalid.Method C:

• Closing the </li> element eliminates the need for <br />
  tags.
  
• Omitting the <ul> element makes it difficult to style this particular list differently.
  
• Invalid.

Method D:

• Valid!
  
• Provides semantic meaning and structure.
  
• Bullets will render to the left of each item on most browsers.
  
• Wrapping lines will indent on most browsers.
  
• It can be easily styled uniquely with CSS.

As you can see, you can learn a lot from a seemingly innocent little question. Even if you’re already using Method D exclusively on all of your pages, it’s nice to know why you do things the way you do. We’ll continue to explore such “why” questions throughout the book, giving you more ammunition to make the best choice at the right time.