Home   Web Top   Bottom Contents   Prev   Next

Miscellaneous Notes About Lists

Topics on This Page

<font> Tags and Lists
Using Lists for Indentation
Lists Beside Images

<font> Tags and Lists

If you're using <font> tags rather than CSS, you'll run into some problems with lists. To be valid under the rules of HTML, <font> tags must be placed within the <li> tags (or within the <dt> and <dd> tags of definition lists). For example: 

<ul>
  <li><font color="red">Item #1</font></li>
  <li><font color="red">Item #2</font></li>
  <li><font color="red">Item #2</font></li>
</ul>

This correct usage has an unfortunate side-effect: the bullets themselves don't get colored. If you want the bullets to be the same color as the text, it's necessary to resort to incorrect HTML and place the entire list inside a <font> tag. 

<font color="red">
<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #2</li>
</ul>
</font>

Today's Netscape and IE accept this incorrect HTML usage, but — as is always the case when you use incorrect HTML — you run the risk that future versions will refuse to display this correctly. And you'll have to expect a number of error messages if you validate your page.

Using Lists for Indentation

Because <ul> and <ol> are displayed somewhat indented, you'll often see these tags used just for indentation if you look at the code for older web pages. For example: 

<ul>
  <p>
    This paragraph is displayed with indentation.
  </p>
</ul>

Although both Netscape and IE accept this code, it is incorrect HTML markup because <ol> and <ul> are only supposed to include <li> tags. But when you include <li>, a bullet or number is also displayed.

HTML doesn't provide any tags specifically for indentation (CSS does, of course). But there are a couple of methods of achieving indentation that are valid according to the rules of HTML.

The <blockquote> tag is intended for indicating a quote. Although the HTML specifications don't specify how a quote is presented, both IE and Netscape have implemented it by using indentation. I admit that I sometimes use <blockquote> for this purpose, although it's risky because there's no guarantee that all browsers will implement <blockquote> with indentation.

Perhaps a better way to achieve indentation is with a definition list. Use a <dl> with no <dt> and with a single <dd>. This is legal because definition lists are not required to include any <dt> tags.

These indentation methods rely on the presentation made by browsers, and there's no guarantee that all browsers will present your text the way you intend it. Also, you're "lying" by indicating that your text is a quote or a definition list, which it is not. This might become apparent in a speaking browser, for example, because it's possible that a speaking browser might announce to the user that the text is a quote or a definition. 

<p> A normal paragraph. </p>

<blockquote>
  <p> An indented paragraph using blockquote. </p>
</blockquote>

<dl><dd>
  <p> An indented paragraph using a definition list. </p>
</dd></dl>

A normal paragraph.

An indented paragraph using blockquote.

An indented paragraph using a definition list.

Lists Beside Images

It's perfectly valid to place a list next to a floating image (one with align="left" or with the CSS float: left; property). The problem browser this time is IE 5, which seems to have a bug when it comes to displaying this. (Note: IE 5 for the Mac is very different from IE 5 for the PC, and I don't know whether the Mac version has this bug. I also don't know whether the problem was corrected in IE 5.5.) 

<img src="images/browndot.gif" width="100" height="200" alt=""
     align="left" hspace="10" />
<br />
<p> Here is a nested list: </p>
<ul>
  <li> Item #1. </li>
  <li> Item #2. </li>
  <li> Here's the inner list:
    <ol>
      <li> Item #1. </li>
      <li> Item #2. </li>
    </ol>
  </li>
  <li> Here's one more item </li>
</ul>
<br clear="all" /><br />

Here is a nested list:



Here's how this looks in IE 4 and most other browsers:

List as seen in IE 4

But here's how it looks in IE 5:

List as seen in IE 5

You can make this appear correctly in IE 5 as well as other browsers by placing the list in a table. We haven't gotten to tables yet, but here's the markup you'd use: 

<img src="images/browndot.gif" width="100" height="200" alt=""
     align="left" hspace="10" />
<table><tr><td>
<br />
<p> Here is a nested list: </p>
<ul>
  <li> Item #1. </li>
  <li> Item #2. </li>
  <li> Here's the inner list:
    <ol>
      <li> Item #1. </li>
      <li> Item #2. </li>
    </ol>
  </li>
  <li> Here's one more item </li>
</ul>
</td></tr></table>
<br clear="all" /><br />

Home   Web Top   Bottom Contents   Prev   Next