Best Practices Web Design

Looking for the lessons? Get started!

The many ways to list items in HTML.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

Creating lists means organizing data. The better you organize your lists, the easier the user will understand what the data mean. — SAP Design Guild

There are three widely used kinds of lists: unordered, ordered, and definition lists. Since we use unordered (<ul> </ul>) in the first part of the lessons, let’s start off with a quick look at the other two. But first, some things all lists have in common.

List Properties

Lists have a number of properties that can be used to modify their appearance.

List-Style-Type

By default, ordered and unordered lists have “markers,” either a bullet or a number, to set them off. The list-style-type element lets you modify the appearance of those markers, either to change them or to have them not display at all.

See below to get some examples of how the different lists employ the list-style-type element.

List-Style-Position

Inside or outside? The default position for list numeration is outside (called a "hanging indent"), but you can change that with the list-style-position attribute (try them to see how they look in your lists):

list-style-position: inside;

Unfortunately, CSS doesn’t allow you to decide how much room will be between the bullets/numeration and the list item text, nor can you tinker with the vertical positioning. (We may see something along these lines in CSS3.)

Using Images for Numeration

By using the list-style-image attribute, you can replace the lame old numbers with lovely images. How crazy you go with these is your choice.

list-style-image: url(images/icons/number.gif);

This isn’t always very useful with ordered lists, as the list numeration changes with every item. Unless you want to style every single item differently (a tiresome chore, I’m sure), you’re better off not trying this with an ordered list. It works nicely with unordered lists, however.

It’s also worth noting that Internet Explorer has issues with the list-style-image attribute. IE6 and 7 refuse to display a list marker image in a list item that is floated.

More about floats.

IE6 and 7 won’t hide the list-image using list-style: none ; instead, both browsers need list-style-image: none. And neither browser supports the inherit value.

IE8 will actually crash the browser when list-style-image, even with a valid path value, is applied via the universal selector. In other words, this:

* {
   list-style-image: url("images/link.png");
}

makes IE8 throw a hairball.

Ordered Lists

Here’s an example of an ordered list of some Internet sites about Web design that I like:

1. SitePoint
2. CSS Tricks
3. A List Apart
4. HTML Dog

And here’s the code behind that list:

<ol>
   <li>SitePoint</li>
   <li>CSS Tricks</li>
   <li>A List Apart</li>
   <li>HTML Dog</li>
</ol>

Choosing How the List Will Display Counts

You can also choose what numbers will display on your ordered list. In fact, you have a lot of choices here.

By using the start attribute, you can make your list start with a number other than "1":

<ol start="4">Starts the list with "4"

but this is obsolete. There’s a CSS-only method to achieve the same effect without using deprecated and obsolete code, but it isn’t easy for a beginner. Here’s the method if you’re interested, from veteran Web designer Predrag Kanazir. A similar method is detailed by Opera’s David Storey, but this is more about CSS counters than ordered lists. (Side note: it seems that HTML 5 may be restoring the start="number" HTML code.)

Back to CSS that works:

Using the list-style-type attribute, you can count your list down with something besides plain old (default) Arabic numerals: lower-case alphabet letters (a, b, c); upper-case alphabet letters (A,B,C); lower-case Roman numerals (i,ii,iii), or upper-case Roman numerals (I,II,III):

ol {
list-style-type: lower-alpha;
}

ol {
list-style-type: upper-alpha;
}

ol {
list-style-type: lower-roman;
}

ol {
list-style-type: upper-roman;
}

Other values include decimal, decimal-leading-zero (i.e. 01, 02), lower-greek (lower-case Greek letters), none, and inherit.

You can choose to have your list items display with no bullet whatsoever, using the list-style-type attribute:

list-style-type: none;

And you can use the same list-style-type attribute to set your ordered list items to display the same numeration style throughout your pages:

list-style-type: decimal;

list-style-type: upper-alpha;

list-style-type: lower-alpha;

list-style-type: upper-roman;

list-style-type: lower-roman;

The list-style-position and list-style-type properties are delineated above, and work fairly well with ordered lists.

Definition Lists

We usually use these when we have a list of terms and definitions, whether we’re writing information about a dictionary or a recipe, or whatever. We also use them sometimes in making fancy navigation menus (more on this elsewhere).

Here’s an example from an imaginary historical site listing some Chinese dynasties:

Xia Dynasty

2070–1600 BC

Shang Dynasty

1600–1046 BC

Eastern Zhou Dynasty

(Traditionally divided into the Spring and Autumn Period, and the Warring States Period)

770–256 BC

Qin Dynasty

221–206 BC

Western Han Dynasty

206 BC–9 AD

And here’s the code behind that list:

<dl>
   <dt>Xia Dynasty</dt>
      <dd>2070–1600 BC</dd>
   <dt>Shang Dynasty</dt>
      <dd>1600–1046 BC</dd>
   <dt>Eastern Zhou Dynasty</dt>
      <dd>(Traditionally divided into the Spring and Autumn Period, and the Warring States Period)</dd>
      <dd>770–256 BC</dd>
   <dt>Qin Dynasty</dt>
      <dd>221–206 BC</dd>
   <dt>Western Han Dynasty</dt>
      <dd>206 BC–9 AD</dd>
</dl>

The <dt> code sets the definition term, and the <dd> code sets the content of the definition.

Note that you can have more than one <dd> list item for each <dt> item.

Unordered Lists

These are the simplest and by far the most common lists in use on modern Web pages. In their most basic form, they just create bulleted lists; since the list items are bulleted, in theory it doesn’t matter in what order they appear. Here’s a code snippet:

<ul>
   <li>An item</li>
   <li>Another item</li>
   <li>A third item</li>
</ul>

which gives us:

• An item
• Another item
• A third item

Choosing the “Bullet” Style for Unordered Lists

What fun would it be if we couldn’t choose the bullet styles for unordered lists? We have our choice of three: discs (the default), squares, and circles.

list-style-type: disc; Starts the list with a disc
list-style-type: square; Starts the list with a square
list-style-type: circle; Starts the list with a circle

You can also choose to have your unordered list items display with no bullet whatsoever, using the same list-style-type attribute:

list-style-type: none;

The list-style-position and list-style-type properties are delineated above, and work quite well with unordered lists.

Side note: When you become a bit more proficient in making Web pages, you will want a big, beautiful, highly styled navigation list – maybe a horizontal bar of buttons, a vertical lists of clickable images, whatever. You will use unordered lists to make those navigation lists. Of course, you’ll need plenty of help from your stylesheet, maybe some images, maybe even some JavaScript if you want. But that comes later.

You’ll also need to learn about nesting lists:

More about nesting elements.