Bulleted (Unordered) Lists | Sams Teach Yourself HTML in 10 Minutes (4th Edition)

A bullet (usually a solid circle) appears in front of each item in an unordered list. HTML automatically creates the bullet when you use the unordered list tag (<ul>) together with the list item tag (<li>). Although the following sample HTML shows each list item as a single line of text, your list items can be as long as you want:

<ul><li>first item in the list</li> <li>second item in the list</li> <li>third item in the list</li></ul>

Figure 6.1 shows how the Web browser displays an ordered and an unordered list. The figure includes list examples from many of the following sections. When your list items are longer than a single line of text, the Web browser indents the second line (and any following lines) so that the text lines up.

Figure 6.1. Ordered and unordered lists shown in the Web browser.

Formatting Bulleted Lists

HTML automatically adds a solid circle in front of each list item as a bullet, but you have two other choices. Using style sheet tags (which you learned about in Lesson 5, "Adding Your Own Style"), you can select one of two other bullet types: a square or a hollow circle. You can see how your HTML document would look if you chose to use a square bullet instead of the standard solid circle. Figure 6.1 shows how the Web browser displays this bullet type.

<!DOCTYPE html      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"        xml:lang="en" lang="en"> <head> <title>Bullet Options</title> <style type="text/css"> ul.square {list-style-type:square} ul.image {list-style- image:url("http://www.xeroxblankmedia.co.uk/graphics/globe.gif")} </style> </head> <body> <ul > <li>a list item</li> <li>another list item</li> </ul> <ul > <li>a list item</li> <li>another list item</li> </ul> </body> </html>

You'll notice that this sample HTML also includes a style (list-style-image). This style enables you to replace the plain HTML bullets with your own image. In this example, I replaced the bullets with an image of a globe. Try changing the URL for one of your own images. You can see the globe image I chose in Figure 6.1.