If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

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.)

Lists. 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:

Apples
Spaghetti
Green Beans
Milk

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 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 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.

Methods B, C and D

Method B: The bullet that bites

<li>Apples<br />
<li>Spaghetti<br />
<li>Green Beans<br />
<li>Milk<br />

Most competent browsers will insert a bullet to the left of a list item when the <li> element is used. One might use Method B to achieve those results, adding the <li> by itself when a bullet is desired. However, some of those same competent browsers won’t display the bullet when an <li> element isn’t contained within one of its proper parent, the mighty <ul>. The <li> ’s other parent is the <ol> element, for “ordered lists,” which I’ll discuss further on in the book.

The bullet does help the wrapping issue to a certain extent. A new grocery item would be signified by a bullet, to its left. If an item wraps to the next line, the absence of a bullet should be enough to distinguish itself from being a whole new item. But there is something else wrong with Method B, aside from its resulting display: It’s not valid.

Validation, please According to the W3C’s XHTML 1.0 specification, all tags must eventually close—and if we were to go ahead and open an <li> for each grocery item, without closing it at the other end as in the example, shame on us!

We’ve mimicked the automatic line-breaking that occurs when a proper unordered list is used by adding the <br/> tag at the end. But there’s a better way.

It’s valuable to get used to the idea of writing valid markup, consistently. By ensuring our markup is valid, we’ll worry less about problems that may occur because of unclosed or improperly nested elements in the future. Not to mention that if anyone else is looking at our code, it’s easier for everyone involved to dive in and understand exactly what’s going on.

Be sure to use the W3C’s online validation tool (http://validator.w3.org/) to validate your files by URI or file upload. You’ll be happy you did in the long run.

Method C: Getting closer

<li>Apples</li>
<li>Spaghetti</li>
<li>Green Beans</li>
<li>Milk</li>

Method C brings us closer to a preferable solution, but fails miserably in one potentially obvious way: It’s still not valid markup. We’ve closed each <li> tag properly, and since they are block-level elements, using them eliminates the need for a <br/> tag, putting each list item on its own line. But, we’re miss ing an outer layer of structure, lacking a containing element that denotes “This group of items is a list!”

It’s also important to view this from a semantic angle as well—that the list is a group of items that belong together, therefore they should be denoted as such. Furthermore, using proper list tags says very clearly to the browser, software, or device, “This group of items is a list!” A good example of how semantic markup is about structuring items for what they are.

Block level vs. Inline: HTML elements can inherently be either block level or inline. Block-level elements begin on their own line, followed by a line break, while inline elements are rendered on the same line as other inline elements. Block-level elements can contain other block-level or inline elements, while inline elements can’t contain block-level elements.

Some examples of block-level elements include <div>, <h1>-<h6>, <form>. Some examples of inline elements include <span>, <storing>, <em>, <q>.

If we were to look at our grocery list in purely an XML sort of way, we might choose to mark it up as shown in this example:

<grocerylist>
<item>Apples</item>
<item>Spaghetti</item>
<item>Green Beans</item>
<item>Milk</item>
</grocerylist>

The entire list has a containing element,<grocerylist> , that all of the grocery items belong to. Grouping the items in this manner will make life easier for XML-based applications that may want to extract the items from the list.

For instance, a developer could author an XSLT style sheet that would transform this list of items into XHTML, plain text, or even a PDF document. Because of the predictable nature of a group of list items, software will have an easy time taking the information and doing something useful with it.

While I’m not dealing with XML in this book directly, the principles are carried over to the world of XHTML. Providing a meaningful structure to our markup gains flexibility later on. Whether it be the increased ease of adding CSS to properly structured documents or the improved manageability of making changes to markup that is easy to understand— providing that structure will make for less work later on down the road.

Let’s take a close look at Method D and see how this all fits together—providing a structure that the most browsers and devices can read, while also allowing us to style our list in several different ways.

Method D: Wrapper’s delight

<ul>
<li>Apples</li>
<li>Spaghetti</li>
<li>Green Beans</li>
<li>Milk</li>
</ul>

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:

• 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.

Extra credit

For extra credit, let’s look at a few different ways we can take advantage of our marked-up grocery list, using CSS to style it several different ways. We’ll throw away defaults, add custom bullets, and then turn it horizontal for a few navigation bar ideas.

Bullet Lists

Bite the bullet

“But I hate the way the bullets look on my grocery list, so I should just keep using those <br/> tags.”

No need to revert to old habits—we can continue to use our structured unordered list and let CSS turn off the bullets and indenting (if that sort of thing floats your boat). The key here is to keep our list structured, and then let CSS handle presentation details.

First add a CSS rule that will turn off the bullets:

ul {
list-style: none;
}

the results of which can be seen in Figure 1-4.

Figure 1-4. A list with bullets turned off

Now, we’ll turn off indenting. By default, there is a certain amount of padding added to the left side of any unordered list. But don’t worry, we can just chop it off if we’d like:

ul {
list-style: none;
padding-left: 0;
}

The results are seen in Figure 1-5.

Figure 1-5. A list with bullets and indenting turned off

While the example in Figure 1-5 looks like we’ve just marked it up with a few <br/> tags, it’s still the same structured, valid, unordered list—ready to be viewed in any browser or device and styled differently with the update of a few CSS rules, if so desired.

Getting fancier with custom bullets

Perhaps you would like bullets for your list, but instead using your own bullet image, rather than letting the browser use its boring defaults. There are two ways to do this—the second of which I prefer due to its more consistent results across various browsers.

The first option would be to use the list-style-image property to assign an image to use in place of the default bullet.

ul {
list-style-image: url(fancybullet.gif);
}

This is the simplest method; however, it renders somewhat inconsistent results in some browsers in respect to the vertical positioning of the image. Some browsers will line it up directly in the middle of list item text; others may position it slightly higher. It’s a bit inconsistent.

To get around the vertical placement issue that list-style-image reveals on a few popular browsers, I like to use an alternate method, which is to set the image as a background for each <li> element.

First we’ll turn off the default bulleting, and then add our own background image:

ul {
list-style: none;
}

li {
background: url(fancybullet.gif) no-repeat 0 50%;
padding-left: 17px;
}

no-repeat tells the browser not to tile the image (which it does by default), while the 0 50% tells the browser to place the background 0 pixels from the left and 50 percent down from the top, essentially vertically centering the fancybullet.gif. We could have also used exact pixel locations from left and top the same way. 0 6px would have placed the bullet 0 pixels from the left and 6 pixels from the top.

We also add 17 pixels of padding to the left of the list item so that our 15-pixel-wide by 5-pixel-high image will show through completely, and with a little whitespace, without any overlapping of the text. This value would be adjusted depending on the width of the bullet image you were using (see Figure 1-6).

Figure 1-6. A list with custom bullets

Lists that Navigate

I’ve shared a few methods of turning unordered lists into horizontal navigation on my personal site (www.simplebits.com), creating tab-like effects using ordinary, structured XHTML—just like the example grocery list.

For instance, here we’ll take the grocery list and turn it into a navigation bar for an online supermarket (that happens to only sell a handful of items).

We’d like the navigation in this case to be horizontal and also have some way of highlighting an item when it’s hovered over or selected, creating a tab-like effect.

First, we’ll add an id to our list so that we can apply specific CSS styles to it. We’ll also make each grocery item a link.

<ul id=”minitabs”>
<li><a href=”/apples/”>Apples</a></li>
<li><a href=”/spaghetti/”>Spaghetti</a></li>
<li><a href=”/greenbeans/”>Green Beans</a></li>
<li><a href=”/milk/”>Milk</a></li>
</ul>

Now, start to add the accompanying CSS:

#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}

#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style: none
}

What we’ve done here is essentially turn off bullets and default indenting. We’ve also taken the first step in making the list horizontal, rather than vertical, by setting the display to inline. A bottom border has been added as well to help define the group of links.

The second step in making the navigation bar horizontal is to float our links to the left. We’ll also style the hyperlinks a little and adjust some padding and margins:

#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}

#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}

Here we’ve told all a elements within our list to float: left, essentially forcing them all to line up horizontally in a row. We’ve also added some color, made the links bold, and turned off underlines.

Next, create a tab-like border below the links that is activated when hovered or selected:

#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}

#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}

#minitabs a.active, #minitabs a:hover {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #363;
}
#minitabs a:hover {
color: #696;
}

For highlighting and hovering, we’ve added a 4-pixel-tall bottom border to the selected or hovered <li> elements to create a tab-like effect. Highlighted tabs can also be “kept lit” by adding class=”active” to the href of our choice:

<li><a href=”/spaghetti/” class=”active”>spaghetti</a></li>

This active class shares identical CSS rules with a:hover. Figure 1-7 shows the resulting navigation bar.

Figure 1-7. The resulting mini-tab navigation bar

I’ve used this method of navigation for my own personal site (www.simplebits.com) as well as on an Inc.com (www.inc.com) redesign in July 2003. Feel free to check the source of these sites for more code examples.

With some padding and border width adjustments, a variety of different tab-like effects can be achieved, and we’ve done all of this so far using zero images or JavaScript and our basic XHTML-structured grocery list. Hooray for us!

Mini-tab Shapes

For something a little different than your average, boxy CSS border, with a few slight modifications we can add fun shapes to the mix to create some interesting navigational effects.

We can use the same unordered list, building on similar CSS from the previous mini-tab example:

#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

#minitabs a.active, #minitabs a:hover {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}

This CSS will probably look similar to the previous example. The main difference here is the absence of a border-bottom that created the 4-pixel-tall tab and the addition of a single background-image set to sit bottom center for all hover and selected states (see Figure 1-8).

Figure 1-8. A mini-tab navigation bar with shaped background images

The trick here is to choose an image that is narrow enough to fit under your smallest navigation item. This ensures you’ll only need one single image to use for highlighting all of your navigational links, regardless of varying character widths. There are, of course, unlimited possibilities in regards to the shapes you could use on your own projects (see Figure 1-9).

Figure 1-9. A few other various shape possibilities

For source code and working examples of these mini-tabs, see www.simplebits.com/tips/. And for more creative ways to style lists, check out Mark Newhouse’s “Taming Lists article” at A List Apart magazine (www.alistapart.com/stories/taminglists/).

—

by Apress Publishing

——-