Valid and Not-so-valid Lists

Topics on this page:

1. What makes a list valid
2. Headings
3. <font> tags
4. Indentation
5. Unindentation
6. Images instead of bullets

What makes a list valid

To be valid, a <ul> or <ol> tag can contain only <li> tags and nothing else. A <dl> tag can contain only <dt> and <dd> tags. <li> and <dd> tags contain most anything, but <dt> tags are restricted to inline tags such as <b>, <i> and <font>.

What do I mean by valid? I mean that the code adheres to the HTML 4.0 standard, and will pass verification at the W3C and WDG validators. Browsers aren't as fussy as the validators are, but if you restrict yourself to valid code you can be fairly sure that all browsers (including future ones) will be able to display your pages. Unfortunately, there are some things that cannot be done with valid code.

Headings

Some people like to include a heading in their lists, placed right over the first list item. The heading is indented like the list item, and there's only a single space between the heading and the first line.

This is my heading
• List item #1
• List item #2
• List item #3

<ul>
  <b> This is my heading </b>
  <li> List item #1 </li>
  <li> List item #2 </li>
  <li> List item #3 </li>
</ul>

While this is supported well by most browsers, it is not valid code since the <ul> tag is not supposed to contain text - only <li> tags. Personally, I prefer the valid way anyway - I think it looks better:

• List item #1
• List item #2
• List item #3

<b> This is my heading </b>
<ul>
  <li> List item #1 </li>
  <li> List item #2 </li>
  <li> List item #3 </li>
</ul>

The <font> Tag

The HTML standard does not allow block tags inside a <font> tag, so any open <font> tag should be closed before a list (<ul>, <ol> and <dl> are all block tags). To code correctly, you have to use a <font> tag within each list item that it applies to:

• List item #1.
• List item #2.
• List item #3.

<ul>
  <li> <font color="#ff0000"> List item #1. </font> </li>
  <li> <font color="#ff0000"> List item #2. </font> </li>
  <li> <font color="#ff0000"> List item #3. </font> </li>
</ul>

One drawback to this (besides the obvious verbosity) is that the bullet itself doesn't get colored. If you want the bullet the same color as the text, you have no choice but to use invalid code:

<font color="#ff0000">
  <ul>
    <li> List item #1. </li>
    <li> List item #2. </li>
    <li> List item #3. </li>
  </ul>
</font>

Indentation

HTML does not provide a tag for indenting.

Some people use a UL or OL without any LI tags to accomplish indentation, like I've done here.

<ul>
  Some people use a UL or OL without any LI tags to accomplish
  indentation, like I've done here.
</ul>

This is definitely not valid HTML, although most browsers will let you get away with it. There are valid ways to get indentation with other tags. The tags weren't meant for the purpose and HTML purists will look down their noses at you, but they work in most browsers.

One option is the BLOCKQUOTE tag. Although intended for quotes, BLOCKQUOTE is implemented in most browsers as indented text. BLOCKQUOTE is allowed to contain block tags, so it's a good choice.

<blockquote>
  One option is the BLOCKQUOTE tag. Although intended for quotes, BLOCKQUOTE
  is implemented in most browsers as indented text. BLOCKQUOTE is allowed to
  contain block tags, so it's a good choice.
</blockquote>

Another perhaps better choice is to use a definition list with a single DD tag and no DT tags. DD tags are allowed to contain block tags, so this is valid.

<dl><dd>
  Another perhaps better choice is to use a definition list with a single DD
  tag and no DT tags. DD tags are allowed to contain block tags, so this is
  valid.
</dd></dl>

Unindentation

Is that a word?

What if you want a bulleted list but you don't want the list indented? It's totally non-valid, but most browsers will produce a bullet when a <li> tag is used in open code rather than inside a <ul> or <ol> tag.

<li> Item 1. </li>
<li type="square"> Item 2. </li>
<li type="circle"> Item 3. </li>
<li type="A"> Item 4. </li>

In Netscape 4, the bullets are much smaller than they are when a <ul> tag is included. Notice that type="square" and type="circle" are supported, but type values associated with ordered lists such as type="A" are not.

Images instead of bullets

Perhaps you'd like to create an unordered list, but to use your own images rather than bullets. You can't use the <li> tag, because that always produces a bullet. A definition list provides the answer.

Note: Stylesheets provide a method of substituting images for bullets in the <li> tag. This is the best way to substitute images, except for the fact that browser support is poor. Only recent versions of IE support this at the current time.

List item #1.

List item #2.

List item #3.

<dl>
  <dd>
    <img src="images/EmotMustache.gif" width="16" height="16" alt="" />
    List item #1.
  </dd>
  <dd>
    <img src="images/EmotMustache.gif" width="16" height="16" alt="" />
    List item #2.
  </dd>
  <dd>
    <img src="images/EmotMustache.gif" width="16" height="16" alt="" />
    List item #3.
  </dd>
</dl>