12.4 Custom Bullets

One 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. [<dl>, 7.7.1]

For example,

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

The fancier list is shown in Figure 12-1.

Keep in mind that this trick only works well 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.