Custom Bullets (HTML & XHTML: The Definitive Guide, 4th Edition)

17.3. Custom Bullets

A common use of the definition list has nothing to do with definitions, but instead deals with adding custom bullets to an otherwise unordered list. In this trick, leave the <dt> tag empty, and add an <img> tag that references the desired bullet image at the beginning of each <dd> tag. Section 7.5.1, "The <dl> Tag" For example, in HTML (we'll let you add the necessary end tags to make it XHTML-compatible, too):

<dl>
  <dt><dd><img src="checkmark.gif"> Pickled Kumquats
  <dt><dd><img src="checkmark.gif"> 'Quats and 'Kraut 
  <dt><dd><img src="checkmark.gif"> 'Quatshakes 
  <dt><dd><img src="checkmark.gif"> Liver with Fried 'Quats
</dl>

The fancier list is shown in Figure 17-1.

Figure 17-1. Custom bullets for unordered lists

Keep in mind that this trick works well only if your list items are short enough to not wrap within the browser window. If the item does wrap, the next line will start aligned with the left edge of the bullet, not the left edge of the text, as you might hope.

Also keep in mind that the list-style-image property can be used to achieve the same result with a CSS-compliant browser. For example, the following code has the same result as our trick. The difference is that not all browsers are fully CSS-compliant, but our trick works with all of them. Section 8.4.7.1, "The list-style-image property"

<style>
ul.checks li {list-style-image: url("pics/checkmark.gif")}
</style>
...later in the document
<ul class="checks">
   <li> Pickled Kumquats </li>
   <li> 'Quats and 'Kraut </li> 
   <li> 'Quatshakes </li> 
   <li> Liver with Fried 'Quats </li>
</ul>