Lists may seem to be mundane items, but many pages on the Web include at least one. The way you choose to mark up these lists can make a big difference. This article explores several the advantages and disadvantages of several common markup methods. It is taken from chapter one of Dan Cederholm's book Web Standards Solutions: The Markup and Style Handbook (Apress, 2004; ISBN: 1590593812).
Which of the following would be best for marking up a grocery list?
Method A: The <br /> breakdown
Apples<br /> Spaghetti<br /> Green Beans<br /> Milk<br />
Method A is certainly one thatís been used for years, heavily, on perhaps millions of web pages. In fact, Iím sure weíre all guilty of using this approach at one time or another, right? Weíd like each item in the list to be on its own line, and by inserting a break tag (using the valid XHTML, self-closing version here, <br />) a line break will be added after each item. Thatís about all it does, and it seems to work.
However, what if we wanted to style the grocery list differently from other elements on the page? For instance, what if we would like this list to have red links instead of the default blue, or a different font size from the rest of the text on the page? We really canít. Weíre stuck with whatever default font styles weíve set for the entire document (if there are any at all), and since thereís no surrounding element for the list, we canít assign it any unique CSS rules.
Itís a wrap
Letís also say that we added a particularly long grocery item to the list: ďFive Foot Loaf of Anthonyís Italian BreadĒ. Depending on where this list is placed in the layout of the page, long items may run the risk of wrapping to the next line if there isnít enough horizontal space, or if the userís browser window width is narrow.
It would be also be nice to take into account the possibility of low-vision users increasing their default text size to gain readability. Line items that we thought fit just great in a narrow column, as in Figure 1-1, now break in unpredictable places, as in Figure 1-2, throwing off the design when the text size is increased by the user.
Figure 1-1. An example with default text size
Figure 1-2. The same example with increased text size
Hmm. Now, I know Iím supposed to buy bread, but the two lines that precede it in Figure 1-2 are a bit confusing.
A similar wrapping dilemma rears its ugly head when long lines are viewed on the small screen of a device such as a phone or Personal Digital Assistant (PDA). The ultimate technophile may stroll into the supermarket with Palm Pilot in hand, rather than the traditional sheet of paper for their shopping list, yet they eventually wander aimlessly, looking up and down the aisles for ďAnthonyís Italian.Ē
Iím essentially proving a point hereóthat using Method A doesnít take into account the fluidity that web pages can have depending on variables that are outside the designerís control.
This chapter is from Web Standards Solutions: The Markup and Style Handbook by Dan Cederhold (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today. Buy this book now.