Home arrow Web Standards arrow Making Lists Using XHTML

Making Lists Using XHTML

As with all facets of web design, there are many ways to do a task and get the same (or similar) results. This chapter presents methods for making lists using XHTML and how the lists will look on a variety of devices, including handhelds. (From the book Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm, from Apress, 2004, ISBN: 1590593812.)

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
August 11, 2004
  1. · Making Lists Using XHTML
  2. · Methods B, C and D
  3. · Bullet Lists
  4. · Lists that Navigate
  5. · Mini-tab Shapes

print this article

Making Lists Using XHTML
(Page 1 of 5 )

cederholmLists. They’re found in just about any page on the Web. Lists of hyperlinks, lists of items in a shopping cart, lists of your favorite movies—even lists for the navigation of an entire web-site. While it might seem arbitrary to some, how we mark up these lists is what we’ll explore, discovering the advantages (and disadvantages) of a few common methods. Later, we’ll put those advantages to the test with several examples on how to style an ordinary list.


Let’s go shopping

Initially, I thought about using a laundry list as the example for the chapter, but then quickly realized that I have no idea what items would be included in such a list. So for this example’s sake, groceries it is . . .

Let’s imagine that you needed to mark up a simple grocery list for inclusion on your personal website. You may be wondering what place a grocery list has on any website, but that’s beside the point. We just need a reason to start thinking about lists.

On the page, say we’d like the grocery list to look like . . . well, a list—a vertical series of items, each on their own line:

Green Beans

A seemingly simple task, right? Now, like all facets of web design and development, there are a variety of ways we could attack this to achieve the same (or similar) results. As in all examples found throughout this book, I’ll be presenting things from an eXtensible HyperText Markup Language (XHTML) point of view—making sure that the methods chosen are valid markup and adhere to the standards outlined by the World Wide Web Consortium (W3C, www.w3.org/).

We could simply add a <br/> tag after each item and be done with it, or we could tap into various list elements to get the job done. Let’s look at three different possibilities, and the consequences of using each of them.

Quiz time

Which of the following would be best for marking up a grocery list?

Method A: The <br/> breakdown

Green Beans<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 nar row 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 Cederholm (Apress, 2004, ISBN: 1590593812). Check it out at your favorite bookstore today.

Buy this book now.

blog comments powered by Disqus

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials