Web Blooper of the Month

List Isn't a List

Text on websites often includes list of things: products, services, people, popular songs, etc. Some lists are numbered, some aren't. Unfortunately, many lists on the Web are not encoded or tagged as lists. Instead, they are just encoded as successive lines of text.

Lists that aren't encoded as true HTML lists are usually presented poorly by Web browsers. This is especially true of browsers that present websites atypically, such as browsers for the blind that "read" text aloud, or browsers for small PDA screens that present only the most important data.

Northwest Airlines

A classic example of a list that isn't coded as one can be found at the website of Northwest Airlines, on the page that presents Northwest's Frequent Flier policy (see below). This numbered list is not coded as an HTML ordered list (<ol>...</ol>), but rather is simply a series of paragraphs that begin with numbers, with the numbers being part of the text.

Northwest Airlines example of Web Blooper

Because this list is not identified as one, ordinary browsers won't indent it properly, making it harder for readers to recognize it as a list. Worse, special-purpose browsers, such as Web page readers for the blind, may mis-present it completely, so users might never understand that it is a list.

CityCarShare.org

An unusual example of this blooper can be seen at CityCarShare.org, the website of a car-sharing organization in San Francisco, California. The page that explains the organization's membership policy includes two consecutive lists, one bulleted and one numbered. Oddly, although the bulleted list is encoded as an HTML unordered list (<ul>...</ul>), the numbered list is not. It is encoded as a single paragraph of text broken into lines by break (<br>) tags.

City Car Share example of Web Blooper

Whoever added the bulleted list understands that the purpose of HTML is to encode the meaning, not the appearence, of Web content. The person who added the numbered "list" either did not understand this, or was simply importing text from a word-processor in a very big hurry.

Jeep.com

The worst example of a list not being encoded as one comes from the "Find a Dealer" page of the Jeep automobile website. Until late 2002, the numbered list of instructions on this page was just a big block of prose text. It wasn't even broken into lines (see below).

Jeep example of Web Blooper

This page suffers not only from the "List Isn't a List" blooper, but also from one we discussed in October 2002: "Too Much Text".

Avoiding the Blooper

In late 2002, Jeep upgraded its website, improving the "Find a Dealer" page (among other pages). Notice that the numbered list that had been "buried" in a big block of prose text is now presented as a terse, bulleted list. In the HTML, it is coded as it should be: an unordered list.

Jeep example of avoiding Web Blooper

If textual information presented by a website is, conceptually, a list, it should be encoded as a list, so that any type of browser -- visual, auditory, braille, large-screen, tiny-screen -- can present the information in the most appropriate way.